Chararina開発スタッフblog

デスクトップ・マスコット(エージェント)ソフト「Chararina(キャラリナ)」の開発スタッフによる開発日記&連載記事。頂いたお便りなどもご紹介します。 Chararinaのサイトへ

作成講座

    単発講座: キャラクター画像の輪郭処理について2

    Chararinaで,Photoshopなどの半透明を取り扱えるペイントソフトを使って輪郭の奇麗な画像を表示する方法を解説します.前回の記事にも目を通してください.
    (Nassie)
    続きを読む

    単発講座: キャラクター画像の輪郭処理について1

    Chararinaはもちろん,他のデスクトップマスコットソフトでも,キャラクターの画像を不定形ウィンドウとしてWindowsのデスクトップに直接表示させることがあります.しかし複雑な輪郭を持つ画像を不定形ウィンドウとして表示させるとき,元画像のアンチエイリアス部分が邪魔になり,ジャギーのように表示されてしまうことがあります(人物の輪郭のまわりに白い点々が残る).

    それを解決するには,「ソフトウェアが根本的に(デスクトップに対する)アルファブレンディング表示に対応しており,αチャンネル(半透明)を含む画像を用意しておいて表示する」か,「自分でちまちまドット修正する」の2つのアプローチがあります.現在のChararinaは前者の表示方法に対応していますが,OSがWindows2000/XP以降であること,32bit色表示できること,という制限があります(設定でシステム−半透明 を開き,□画像を半透明表示する □画像の端を滑らかにする をONにする).

    ここでは,後者のアプローチを取らざるを得ない場合の画像編集について簡単に説明します.
    (Nassie)
    続きを読む

    第三回キャラクター作成講座

    すっかりご無沙汰してしまいましたが,第三回キャラクター作成講座をお届けします.

    今回は,左クリックしたときに吹き出しに選択肢を表示します.
    要はメニューですね.

    今回は次のようなメニューを作ります.
    ・タイヤネコを左クリックしてメニューがスタートする
    ・選択肢は4つ(おはよう,こんにちわ,こんばんわ,やっぱりいいです)
    ・選択肢「やっぱりいいです」を選んだら,メッセージを表示してメニューを終了する
    ・他の3つの選択肢を選んだら,メッセージを表示した後,同じメニューを再表示する
    ・メニューの上で右クリックしたらメッセージを出さずメニューを終了する


    1.ダウンロード
    必要なファイルを用意しましたのでここからダウンロードしてください.
    キャラクターを実行する手順は前回とほとんど同じです.


    2.kouza3を実行する
    ダウンロードしたファイルkouza3を実行してください.
    kouza3フォルダが作成されます.

    3.キャラクターを実行する
    kouza3フォルダの中に下のようなkouza3アイコンが表示されるので,それを実行します.
    作成講座3kouza3.batアイコン



    上手くできたら,キャララクターの画像を左クリックしてみてください.
    下の画像の様に,吹き出しにメッセージとメニューが表示されます.
    作成講座3タイヤネコ1



    4.メニューを操作する
    表示されたメニューを選んでみましょう.
    選択した内容に応じたメッセージが出力されます.
    おはよう,こんにちわ,こんばんわ,の順に選ぶとしたの画像の様に表示されます.
    作成講座3タイヤネコ2



    5.メニューを終了する
    メニューを終了するには二つの方法があります.

    ・「やっぱりいいです」を選ぶ
    選択肢「やっぱりいです」を選ぶと,タイヤネコがメッセージを表示してメニューを終了します.
    このメニュー終了の動きは,キャラクターを作るときに意図して組み込んだことで可能になっています.
    メニュー終了処理を組み込んでいない場合は,次の方法で終了します.

    ・メニューの上で右クリックする
    メニューの選択肢(どれでも良い)の上にマウスカーソルを重ねます(選択肢の色が変わります).
    その状態で右クリックするとメニューを終了します(これを「キャンセルする」と言うこともあります.)
    このタイヤネコの場合,右クリックで終了するときはメッセージを表示しません.

    つぎは,6.キャラクターの動きを見るです.
    プログラムコードを使って動作を詳しく説明します.続きを読む

    単発講座: プロフィール欄における改行方法

    キャラクタープロフィール今回は小ネタというか,ちょっとしたノウハウをご紹介します.

    キャラクターを右クリックして[キャラクターについて]-[キャラクターについて]を選択すると,キャラクターのプロフィールが表示できます.この説明文は,下記のようにプロパティをセットすることで設定できるのは仕様の通りです.

    PutProperty( "VdConfig\\Profile", "4人姉妹の長女。穏やかで優しいお嬢さんタイプで少し心配症。〜" );

    さて,上記のキャプチャを見ても解るように春菜のプロフィールには改行が含まれていますが,普通にPutProperty関数の引数に\nを含めても,残念ながらこの画面では改行できません.この理由はちょっと複雑なのですが,綾織での改行を示す\nは"LF"(文字コードで0x0A)を表すのに対し,Windowsで通常使われる改行はCR+LF(0x0D,0x0Aの2バイト)で表されるためです.
    改行コードを使わずにスペースを入れて改行位置を調整しようとしても,プロフィールダイアログのデザイン(色,大きさ)はエンドユーザ環境によりまちまちなので,うまくいきません.さて,それではどうやってCR+LFを指定してやると良いでしょうか?続きを読む

    単発講座: GetHTTPによるサーバアクセス

    PDKでキャラクター開発に使ってみたいけど使い方がわからない機能とか,系統立っていないちょっとしたノウハウの類を,単発の講座として説明してみたいと思います.今回のお題はHTTPで普通のWebサーバにアクセスして文字列を取って来ることができる「GetHTTP」関数です.

    まず,下記のリンクを押してページを開いてみてください.
    [リンク]
    ブラウザに,「春菜はるな」とだけ表示されています.ソースを表示すると(IEの場合はメニューから「表示(V)-ソース(C)」),改行をはさんで2行で「春菜(改行)はるな」となっていることがわかります.

    表示したこのページのURLに着目すると,"?VDCODE=LF&TYPE=HPX-01"という文字が含まれています.ここのHPX-01の部分を,自分でHPX-02に書き換えて,IEの「移動」ボタンを押してください.今度は「絢夏あやか」になりましたか?

    つまりこのページは何かというと,「キャラクターライブラリに登録されているキャラクターの「ベンダーコード(制作者名のようなもの)」と「型番」を指定してやると,そのキャラクターの名前と読みを返す」という機能を提供するページです.他のキャラクターでも試してみてください.この,info.phpの後に"?VDCODE=(ベンダーコード)&TYPE=(型番)」を付ける,というルールに則って指定します.続きを読む

    第二回キャラクター作成講座

    キャラクター作成講座の第二回です.
    前回はキャラクターを表示して最初の挨拶(Hello, World!!)を表示しました.
    第二回は,キャラクターにマウスで左クリックしたときの反応をつけたいと思います.
    第一回はこちらです.

    1.ダウンロード
    今回も必要なファイルを用意しましたのでここからダウンロードしてください.
    キャラクターを実行する手順は前回とほとんど同じです.


    2.kouza2を実行する
    ダウンロードしたファイルkouza2を実行してください.
    kouza2フォルダが作成されます.

    3.キャラクターを実行する
    kouza2フォルダの中に下のようなkouza2アイコンが表示されるので,それを実行します.
    作成講座2kouza2.batアイコン



    上手くできたら,キャララクターの画像を左クリックしてみてください.
    下の画像の様に,吹き出しにメッセージが表示されます.
    作成講座2タイヤネコ1



    4.キャラクターの動きを見る
    キャラクターの動きは前回と同様に,mhello.ayaファイルに書いてあります.
    hello.ayaファイルをメモ帳などのテキストエディタで開きます.
    今回で新しく加わった部分は以下の部分です.

    --
    action MouseUpL@( false )
    {
     Talk( "うにゃ?\n" );
    }
    --
    マウスの左クリックにたいする反応をMouseUpLの{}の間に書くことが出来ます.
    今回はメッセージとして"うにゃ?\n"を表示しています.
    '\n'は改行を表わします.



    5.キャラクターをカスタマイズする(メッセージに変化をつける)
    今回のサンプルデータでは,何度クリックしてもおなじメッセージしか表示しません.
    これではすぐに飽きてしまいますのでメッセージに変化をつけてみましょう.

    まず,キャラクターを終了させてください.
    次にhello.ayaを下のように変更します.

    --
    action MouseUpL@( false )
    {
     Talk( "うにゃ?\n" );
    }
    --
    ↑の部分を↓に変更します.
    --
    int Random( int x );

    action MouseUpL@( false )
    {
     switch( Random( 3 ) )
     {
      case 0:
       Talk( "うにゃ?\n" );
       break;
      case 1:
       Talk( "にゃーどうかしたか?\n" );
       break;
      case 2:
       Talk( "・・・・・・何?\n" );
       break;
     }
    }
    --

    変更できたら実行して見ましょう.kouza2アイコン(下)を実行します.作成講座2kouza2.batアイコン



    今度は何度かクリックすると下の様にメッセージが変化します.
    (メッセージ表示される順番には環境によって変化があります.)
    作成講座2タイヤネコ2



    6.キャラクターをカスタマイズする(メッセージを増やす)
    メッセージが三つでは物足りないという人は,メッセージをもっと増やしてみましょう.
    メッセージを増やすには,下の場所を変更してください.

    メッセージの数を3個から4個に増やすなら,ランダム関数の引数を4に変更します.
    --
     switch( Random( 4 ) )
    --

    増やしたメッセージの数だけcaseを増やします.
    下は4つ目のメッセージを増やす場合です.
    4つ目ですが,caseの数字が3になっていることに注意してください.
    --
      case 3:
       Talk( "4つ目のメッセージ\n" );
       break;
    --

    メッセージを増やして4つにした場合のMouseUpLは,下の様になります.
    --
    action MouseUpL@( false )
    {
     switch( Random( 4 ) )
     {
      case 0:
       Talk( "うにゃ?\n" );
       break;
      case 1:
       Talk( "にゃーどうかしたか?\n" );
       break;
      case 2:
       Talk( "・・・・・・何?\n" );
       break;
      case 3:
       Talk( "4つ目のメッセージ\n" );
       break;
     }
    }
    --



    7.新しい命令,関数の説明
    初めて出てきた命令や関数を順番に説明していきましょう.まずは
    --
    int Random( int x );
    --
    これはランダム関数の1つで,サイコロのような働きをします.
    0〜x-1までの整数のどれか1つを返します.
    今回はランダム関数を下の様に使っています.この場合0,1,2のどれかを返します.
    --
     Random( 3 )
    --


    次はswitchです.
    --
     switch( Random( 3 ) )
    --
    switchは,()内の関数や変数の値に応じて行う処理を分岐する命令です.
    この場合はランダム関数が0を返したらこの処理を,1を返したらあの処理を,という様にキャラクターの動きに変化をつけられます.

    どのような処理を行うかは下の様に定義します.
    --
      case 0:
       Talk( "うにゃ?\n" );
       break;
    --
    "case 0"は,Random(3)が0を返した場合の処理を"case 0"の下に書くことを意味しています.
    上の例ではTalk関数で吹き出しにメッセージ"うにゃ?\n"を表示します.
    その下のbreak;は,ここで処理を終了することを意味しています.
    break;をここに挿入して,その下のcase 1やcase 2の処理を実行させないようにします.

    break;を挿入しないとどうなるか,一度実験してswitchの動きを理解するのも良いと思います.


    8.まとめ
    今回は,左クリックにたいする反応と,その反応に変化をつけてみました.
    ランダム関数を用いて変化をつける方法は他の色々な場面で利用できます.

    StartUpにもこの仕組みを組み込んで,挨拶に変化を持たせることも出来ます.
    一度試してみてはどうでしょうか?


    第一回キャラクター作成講座

    1.ダウンロード
    kouza1をダウンロードします.保存する場所はデスクトップで良いでしょう.
    デスクトップに保存すると下のアイコンがデスクトップに表示されます.
    作成講座1kouza1.exeアイコン



    2.kouza1を実行する.
    kouza1を実行します.

    (以下,展開プログラムの説明を追加する)
    展開先はデスクトップを指定します.

    デスクトップにkouza1フォルダが出来ます.
    作成講座1kouza1フォルダアイコン




    3.kouza1フォルダの内容を確認する
    kouza1フォルダの中にはこのようなファイルが作られます.
    (※windowsの設定によって,見え方が画像と異なる場合があります)
    作成講座1kouza1フォルダ



    4.キャラクターを起動する
    kouza1(以下のアイコン)を実行すると,キャラクターが起動します.
    作成講座1kouza1.batアイコン



    起動したキャラクターです.
    作成講座1タイヤネコ1
    このキャラクターは画像を表示し,吹き出しに「hellow, world」と表示します.



    5.キャラクターの動きを見る
    キャラクターの動きは,hello.ayaファイルに書いてあります.
    hello.ayaファイルをメモ帳などのテキストエディタで開きます.
    作成講座1メモ帳



    --
    void Talk( string str );
    int LoadBitmap( string fname );
    void DisplayImage( int effectflg );
    --
    上の3行は,キャラクターが使用する関数を宣言しています.

    --
    action StartUp@( false )
    {
    (処理)
    }
    --
    この部分は,キャラクターが起動したときに実行する処理であることを表わしています.
    { と } の間の (処理) の部分に,キャラクターが起動したときに実行したい処理をかきます.
    (処理)の内容を下で説明します.

    --
    LoadBitmap( "hello.hp3" );
    DisplayImage( 0 );
    --
    この部分は,画像ファイル'hello.hp3'を読み込み,画面に表示します.
    LoadBitmap関数は,画像ファイル'hello.hp3'を読み込む関数です.
    DisplayImage関数は,読み込んだ画像を画面に表示する関数です.


    --
    Talk( "Hello, world!!" );
    --
    ここで,吹き出しに文字列'Hello, world!!'を表示します.
    Talk関数は,指定された文字列を吹き出しに表示する関数です.


    6.キャラクターをカスタマイズする

    Talk関数で吹き出しに表示するメッセージを変更することが出来るので,お好みのメッセージを表示させてみてください.
    Talk関数には,クリックで次のメッセージを表示する機能も用意されています.
    例えば,Talk関数の行を
    --
    Talk( "Hello, \cworld!!" );
    --
    の様に書き換えて,キャラクターを作り直してみましょう.

    起動しているキャラクターを終了させてから,kouza1(以下のアイコン)を実行します.
    作成講座1kouza1.batアイコン



    今度は吹き出しに'Hello,'を表示して止まります.
    ここで吹き出しをクリックすると,'world!!'が表示されます.
    作成講座1タイヤネコ2

    '\c'は吹き出しやキャラクター画像をクリックするまで,次のメッセージを表示しない制御文字です.
    クリックを待っているときは記号'▼'が点滅します.
    '\c'を上手に使うことで,長いメッセージを読みやすく表示できます.


    7.まとめ

    無事キャラクターを動かすことが出来ましたか?

    キャラリナは,もっと色々なことができるキャラクターを作れます.

    これからは,キャラクターの画像を増やしたり,マウスのクリックに反応するようなキャラクターの作り方を紹介していきます.

      Blog内検索

      Web blog内
      Recent Comments
      Chararinaサイト最新情報
      QRコード
      QRコード
      Archives
      カテゴリ別
      Amazonおまかせリンク
      • ライブドアブログ