[[Nadeshiko_programming4JapaneseStyle]]
#contents
-ステップ１：画像を表示するプログラムを準備する
-[[ステップ２：ロボット画像を右方向に移動させる>nadeshiko/group/step2]]
-[[ステップ３：複数のロボットを右方向に移動させる(移動量は同じ)>nadeshiko/group/step3]]
-[[ステップ４：複数のロボットを右方向に移動させる(移動量は異なる)>nadeshiko/group/step4]]
-[[ステップ５：複数のロボットを2種類の動作で移動させる>nadeshiko/group/step5]]
*ステップ１：画像を表示するプログラムを準備する [#s3ec9bad]
では、まず最初に、母艦のウィンドウにロボット画像(robot.gif)を表示させるプログラムを作ります。ロボットは、あとから移動できるよう、母艦の左はし・上下中央に配置します。このステップでは、表示するだけで移動しませんが、母艦のサイズを変更すると、それに合わせて表示位置を調整するようにしておきます。
#ref(step1_101.png);
**事前に画像を用意しておく [#rae8b677]
表示させるロボット画像は、あらかじめ作成して、ファイルとして保存しておきます。添付ファイルやフリー素材などを利用しても構いませんし、手頃なドット絵作成ツールで描いてもいいでしょう。私は、Takaboさん作のEDGE Ver1.29a(http://www.tkb-soft.hmcbest.com/ )を使いました。36×36ピクセルのロボットを描いています。
**GUI部品を作成する [#l628a2c1]
このプログラムでは、GUI部品として「母艦」と「イメージ」を使っています。母艦がウィンドウになり、イメージでロボット画像を表示します。GUIエディタは使わず、部品を配置していますが、やっていることはGUIエディタとほぼ同じです。
母艦やイメージといったGUI部品は、グループ機能により実現されています。ですから、母艦やイメージの設定方法を眺めることで、グループ機能の基本を理解できます。
グループ機能は、母艦やイメージのような部品を元にして、プログラムの一部を作る機能です。ロボットを表示するイメージ1は、「イメージ」という部品を元に作られています(母艦は、「フォーム」を元にして自動的に作られます)。
部品を元にグループを作る場合は、次のように記述します。
イメージ1とはイメージ
「イメージ」というGUI用の部品を元にして、「イメージ1」という変数でこのグループを操作します。
**部品の値を設定する [#jf744b3d]
続いて、この「イメージ1」のいろいろな値を設定していきます。「イメージ」部品は、「高さ」や「幅」「横」「左」といった値を設定可能です。これらの設定値を変更することで、画像の表示位置などを調整できます。たとえば、「左は0」とすると、ロボット画像は母艦ウィンドウの左はしに表示される、という具合です。各グループの値を設定するときは、「イメージ1について」として、グループ名の指定をひとまとめにできます。
イメージ1について
幅は36
高さは36
左は0
イメージ部品の持つ値は、実際の表示と次のように対応しています。位置の指定は、「左」と「上」で行います。位置を指定するための原点(0,0)は、母艦の左上角にあることに注意してください。
#ref(step1_102.png);
このように「なでしこ」では、あらかじめ用意している部品をグループ機能として呼びだすことで、複雑な機能を部品を合体させるようにして、プログラムを作成できるようになっています。プログラムを作る人は、各部品がどのような機能を持っているかを確認するだけで済むのです。
イメージ部品などがどのような機能を持っているかは、なでしこエディタの左にある「GUI」タブで確認できます。実際に見てみると、非常に多くの機能を持っていることが分かると思います。こんなにたくさんの機能を自分で用意するのは大変ですよね。でも、GUI部品を使えば、これらを合体させるだけで部品の機能を手軽に利用できるようになります。もちろん、使うのは必要な機能だけで、全部の機能を覚えたりする必要はありません。
**上下位置を調整する [#k229538b]
母艦サイズをドラッグで変更した時に、ロボット画像の位置が上下中央になるよう、「●位置合わせする」で調整しています。そのために、母艦を定義するときに、「サイズ変更した時は〜」というイベントで、「位置合わせする」関数を呼び出しています。上下中央の高さは、母艦の高さからイメージの高さを引いて、それを1/2にしています(なんて説明しなくても、サンプルプログラムを読めば、そのまま書いてありますね)。
●位置合わせする()
#ウィンドウの上下中央に表示
イメージ1の上＝(母艦の高さ - イメージ1の高さ)/2
**サンプルプログラムを読もう [#nece4f1e]
では、サンプルプログラムを見てください。ここで、ぜひサンプルプログラムを何となく眺めるのではなく、プログラムの動きを想像しながら、サンプルプログラムを読んでみることをお薦めします。(英語などの学習でも、音読が非常に効果的だそうですから、日本語プログラミング言語「なでしこ」でも、音読してみると細部まで頭に入ってくるかも知れませんね)。
robots_sample_1.nako
&ref(Nadeshiko_programming4JapaneseStyle/nadeshiko_group_20090917.lzh,,全サンプルファイルのダウンロード);
＃2009-09-06
＃ウィンドウ内をロボットが動き回るプログラム
＃オブジェクト指向風グループ機能の練習
＃
＃Copyright 2009 kachi Yutaka
＃
＃本プログラムは、誰でも自由に実行・複製・配布・改変できます。
＃本プログラムには、動作保証はありません。いかなる被害にも、
＃著作権者は責任を負わない物とします。
＃
＃[*]ロボット画像を母艦に表示
＃[ ]ロボット画像を左に移動
＃[ ]複数のロボット画像を左に移動：移動量同じ
＃[ ]複数のロボット画像を左に移動：移動量違う
＃[ ]複数のロボット画像を2種類の動きで移動
＃
＃初期化
母艦について
タイトルは「歩行ロボット」
スタイルは「ウィンドウスタイル」
幅は320
高さは240
サイズ変更した時は〜位置合わせする
イメージ1とはイメージ
イメージ1について
幅は36
高さは36
左は0
位置合わせする
イメージ1の画像は「robot.gif」
# サブプログラム
●位置合わせする()
#ウィンドウの上下中央に表示
イメージ1の上＝(母艦の高さ - イメージ1の高さ)/2
これで、ロボット画像を表示するプログラムができました。あなたも実際にやってみてください。次は、このロボット画像を右方向に動かしてみましょう。
----
-ステップ１：画像を表示するプログラムを準備する
-[[ステップ２：ロボット画像を右方向に移動させる>nadeshiko/group/step2]]
-[[ステップ３：複数のロボットを右方向に移動させる(移動量は同じ)>nadeshiko/group/step3]]
-[[ステップ４：複数のロボットを右方向に移動させる(移動量は異なる)>nadeshiko/group/step4]]
-[[ステップ５：複数のロボットを2種類の動作で移動させる>nadeshiko/group/step5]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
