35:まずは下準備!

◆PROCESSINGで始めるゲーム作りとコンピュータ

Monster_1 35:まずは下準備!

今日の話題

 

4:画面をデザインし、素材を用意しよう

さて前回掲載したリバーシゲームは無事に動作したでしょうか?。

一通りゲームで遊んだケンジくんとユカさんの話を聞いてみましょう。

ヨウコ
二人ともどうだった?

ユカ
これヨウコ先生が作ったんですか?。すごーい。

ヨウコ
研究の合間に急いで作ったから、ちょっと自信がなかったんだけど、楽しんでもらえたかしら?。

ケンジ
俺もこんなゲームが作れるようになるかなぁ。

ヨウコ
大丈夫よ。最も大切なのは、やる気よ。

ユカ
これって授業で教えていただいたPROCESSINGで作られているんですか?。

ヨウコ
そうよ。PROCESSINGはJavaをベースにした言語で、ビジュアルなプログラムが簡単に作れるのが特徴なの。

ヨウコ
じゃぁ、遊び終わった所でさっそくプログラムソースを見てみましょうか?。

ユカ
PROCESSINGのプログラムソースは pde という拡張子がついたファイルですよね?。

ヨウコ
そう。ちなみに授業「11:標準エディタの使い方を覚えよう」でも説明した事があるけど、ケンジくんは覚えているわよね?。

ケンジ
そ、そのくらいは、なんとか・・・(汗)。

.
ダウンロードしたファイルを解凍すると、reversi.pde ファイルが出来上がりましたよね?。これがPROCESSINGのプログラムソースです。

PROCESSINGのプログラムソースは、拡張子が .pde になります。まずはザックリと眺めてみてください。

ケンジ
・・・・・・。

ケンジ
すご~く長いんですけど、・・・まさか、これを今から全部理解するんですか?。

ヨウコ
大丈夫よ。少しずつ丁寧に説明するから。

ヨウコ
まずはプログラミングに入る前に、ゲームのデザインについて説明しておくわね。

ユカ
ゲームデザイン?。たしかこの前、リバーシのゲームルールについては説明して頂きましたよね?。

ヨウコ
そうね。ゲームではルール(仕様、目的)だけじゃなくて画面の表示や動きに関する部分を考えることも大切なの。これは何もゲームに限った話ではないわ。

ヨウコ
画面のデザインや操作のことを専門用語でUIと呼ぶの。人間が操作するアプリケーションでは、UIの良し悪しがアプリケーションの評価に大きく影響するのよ。

ユカ
あ、わかります!。可愛い見た目のアプリケーションって、思わず使いたくなっちゃうし(笑)

ヨウコ
PROCESSINGに限らず、多くのビジュアルなアプリケーションでは、画面デザインとプログラムには密接な関係があるから、デザインはとても重要になるの。

.
data フォルダの下に、今回のゲームで利用する画像や音楽などのファイルが格納されています。

アプリケーションが利用する画像や音楽などのファイルのことをリソースファイルと呼びます。PROCESSINGではデフォルトでプログラムソース(スケッチファイル)と同じ場所にある data フォルダ配下にリソースファイルがあるものとして処理されます。

以下が、今回のdataフォルダの中身になります。

reversi%e6%a7%8b%e6%88%902

ケンジ
拡張子が png になっているのが画像ファイルか。

ヨウコ
あら、良いところに気がついたわね。png 形式は透過画像といって、透明な画素を扱えるとても便利な形式よ。

%e9%80%8f%e9%81%8e%e5%bd%a2%e5%bc%8f(画像URL:illust-AC 様:fujiaki さん、乙姫の花笠 さん)

ヨウコ
背景に画像を重ね合わせることが多いゲームでは、とても重宝する形式ね。これは授業「26:画像を表示する」でも説明したかな?。

ケンジ
も、もちろん覚えているよ・・・。うん

ユカ
vlwというのはPROCESSINGが扱う特別な文字ファイルでしたよね?。

ヨウコ
そうよ。さすがユカさん。

ユカ
えへへ。

ヨウコ
画像や音楽、文字はすべて借り物だから取扱には注意してね。勝手に素材を抜き出して配布したり利用するのはルール違反になるから厳禁よ!。

.
リソースファイルの一覧が理解できた所で、メインとなるリバーシボードの背景画像に注目してください。

今回の背景画像は横サイズが1096、縦サイズが720ピクセルになっています。そこに縦横8✕8のマス目がついていて、右横には駒の数やメッセージを表示する欄があります。

%e3%83%9c%e3%83%bc%e3%83%89%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3

また、マス目の位置と大きさは以下のようになっています。
%e3%83%9e%e3%82%b9%e7%9b%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3

ヨウコ
このボード画像(背景画像)の大きさと、マス目の大きさや位置関係は、今後プログラムで利用することになるから、よく覚えておいてね。

ケンジ
つまり、こんな感じで並んでいるんだよね?。
%e3%83%9e%e3%82%b9%e7%9b%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b32
ヨウコ
その通りよ。ケンジくんもやるじゃない。

ケンジ
へっへー。

.
また今回のゲームでは、PCでの利用を想定して、ボード上に駒を置く操作にマウスクリックを利用しています。

アプリケーションが動作する機械(PCか、スマホか、タブレットか、専用ゲーム機か、サーバーと呼ばれるコンピュータ上か等)に応じて、適切なUIを採用してください。

 

5:雛形を作成しよう

ヨウコ
それじゃぁ、PROCESSINGで新規のプログラムを作って、ゲームの雛形を作成しましょうか。

ケンジ
ええー。せっかく動くプログラムがあるんだから、コピペでいいじゃん。

ヨウコ
それじゃ勉強にならないでしょ!。グダグダ言わないで、手を動かす!。

ケンジ
・・・。

processing%e8%b5%b7%e5%8b%95
ヨウコ
起動できたら、つぎのプログラムを打ち込んでみてね 。


ヨウコ
なんにも処理がないですね。

ヨウコ
そうよ。雛形だしね。これから処理を追加していくの。

ヨウコ
ところで2人は、PROCESSINGとゲームループの関係については覚えているかしら?。

ケンジ
え~っと・・・なんだっけ?。

ヨウコ
しょうがないわね。

processing%e3%82%b2%e3%83%bc%e3%83%a0%e3%83%ab%e3%83%bc%e3%83%97(画像URL:illust-AC 様:任々堂工房 さん、acworks さん)

ヨウコ
これがゲームループとPROCESSINGの関係よ。最初にsetup()関数から始まって、次にdraw()関数が呼び出されるの。

ヨウコ
draw()関数は、アプリケーションが終了するまで自動的に繰り返し呼び出されるから、この部分をゲームループと呼ぶのよ。

ヨウコ
授業「13:プログラムの仕組み」でも説明したわよね・・・。

ケンジ
その授業は、確か腹痛で休んでいたような・・・ないような・・・。

ユカ
よーするに、さぼっていたのよね。

ケンジ
そんなにストレートに言わなくてもいいじゃん・・・。

ユカ
ところで、図にある main() と dispose() 関数ってなんでしたっけ?。

ヨウコ
main()は本当の開始処理部分で、dispose()は終了直前に呼ばれる関数なんだけど、とりあえず今は気にしなくて大丈夫よ。

ヨウコ
重要なことは、最初はsetup()「初期処理関数」から始まって、draw()「描画処理関数」が繰り返し実行される所なの。

ヨウコ
ちなみに、draw()関数は1/60秒という速度で、繰り返し実行されるのよ。

ケンジ
1/60秒!。すっげー。1秒が1000ミリセカンドだから、16.6ミリセカンドごとに繰り返すのか。なんか、北○の拳のケンシ○ウのパンチみたいだな。

ユカ
ケンジの例えって、いつもアニメかゲームばっかりよね・・・。

.
さて、みなさんは雛形ができあがったでしょうか?。

雛形は「何も処理がない」プログラムに見えますが、これでも実行するとちゃんと動作するんですよ。

試しに「実行」ボタンを押してみてください。下記のような画面が表示されたはずです。

%e3%81%b2%e3%81%aa%e5%9e%8b%e5%ae%9f%e8%a1%8c
味も素っ気もない小さな画面ですが(汗)、ちゃんとPROCESSINGが動作している事がわかります。次回からは、この雛形に少しづつプログラムを追加していきます。

標準エディタの使い方に自信がないという方は、「11:標準エディタの使い方を覚えよう」や「12:はじめてのプログラム」などを参照してみてくださいね。

※上記会話に登場する素敵な人物画像は、次のサイト様の画像を利用させて頂いております。ありがとうございます。

画像URL:とりのすみか

 

Forest今日の言葉

・UI(ユーアイ)

友愛でも、いま流行りのAIでもありません(笑)。User Interface(ユーザインタフェース)の事で、ようするに画面表示や操作周りの事です。コマンドのように文字で表示や操作を行う方法をCUI、グラフィカルな絵(ボタンやリストBOXなど)を用いる方法をGUIと呼びます。

 

scroll今日の文法

・setup() : 初期処理関数

PROCESSINGで、プログラムが開始する部分です。エントリーポイントとも言います。正確には main() 関数⇒settings()関数⇒setup()関数という順番で処理が進みますが、まずはsetup()関数から始まるとおぼえてください。

・draw() :描画処理関数

PROCESSINGで画面表示を受け持つ関数です。画面への表示処理は、かならず draw()関数か、draw()関数から呼び出される関数の中に記述します。draw()関数は、デフォルトでは 1/60秒間隔で、繰り返し呼び出されます。

 

 今日のまとめ

  • 人間が操作するアプリではUIが重要となる
  • UIはプログラムと密接な関係がある
  • setup()関数から処理が始まり、draw()関数が繰り返し呼び出される

36:背景画像を表示しよう へ進む
34:さぁ、ゲームを作ろう!へ戻る
目次へ戻る


本ページで利用している特に参照元記載のないアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。