スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

伺かアドベントカレンダー2010

2010年11月にリリースしたゴースト「-小夜子の部屋」のメニューについてまとめます。

☆どんな感じ?
 こんな感じのiphone風のアイコンを利用した、視覚的に解りやすいインターフェイスとなります。右下のスクロールボタンを押すとマウスのホイールでもスクロールします。仕事に疲れた目には優しいので気に入ってます。
図-1図-2


☆材料
今回用意したのは以下の材料です。
アイコン画像 i00.png~i10.png
背景画像 menu.png
これをSSPデフォルトバルーンに重ねます。


☆スクリプト
使用するスクリプトは以下のリストになります。
\f[color,R,G,B] フォントの色指定
\f[shadowcolor,R,G,B] フォントの影色指定
\_b[ファイル名,x,y] メニュー背景画像指定
\_b[ファイル名,inline] アイコン画像指定
\__q[ID,...] 選択肢指定
\n\n[half] 改行(アイコンの配列調整)
\_q ノーウェイトでの表示

これをズラズラと並べていって出来上がったのがこちら。
sys.選択実行.menu : (\1\s[10]\0\c\s[100]\f[color,220,220,220]\f[shadowcolor,100,100,100]\_b[${sys.menuphoto},0,0]\_q
 ☆MENU☆\n\n[half]
 \__q[TalkMenu]\_b[icon/i00.png,inline]会  話\__q
 \__q[TalkConfig]\_b[icon/i01.png,inline]会話設定\__q
 \__q[Changeofclothes]\_b[icon/i02.png,inline]着替え \__q\n\n[half]
(以下省略)


☆味付け
・パルーンツールチップスで下の階層も解りやすくしてみました。
・タッチパネル風にシングルクリックでメニューを開きます。
・「メニュー背景画像指定」をお好みで変えられます。
図-3



☆今後の課題
・背景画像変更に伴って、フォント色も変更できるようにしないと見辛い場合があるでしょう。。
・綺麗に仕上がってないアイコン画像を改修したいです。
・下の画像は携帯電話のスクリーンショットです。機能を限定したモバイル版小夜子の部屋もリリース予定です。
図-4

コメントの投稿

非公開コメント

プロフィール

しまりす

Author:しまりす

拍手コーナー

SiReFaSo
    リンク
    FC2カウンター
    最近の記事
    最近のコメント
    最近のトラックバック
    月別アーカイブ
    カテゴリー
    カレンダー
    07 | 2017/08 | 09
    - - 1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30 31 - -
    公開一周年記念アンケート結果

    投票結果

    ブログ内検索
    FC2ブログランキング
    ねこねこ業務日記

    FC2ブログランキング

    ブロとも申請フォーム

    この人とブロともになる

    RSSリンクの表示
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。