Bookmark this on Hatena Bookmark
Hatena Bookmark - shi3z式ゲームプログラミング入門 #1 72時間でゲームプログラマになる方法
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed

やぁみんな!元気かな? shi3zだよ。

さてさて、先日の環太平洋ミニゲーム開発オリンピック、個人的には参加する方としても見ている方としても大いに楽しめたんだけど、まあ正直、自分が優勝しちゃったのはどうかと思うんだよね。まあ立場もあるし、気を使ってくれたのかもしれないけど、とにかく、僕は次回からは参加しないことにしたんだ。

でもこれって結構面白くて、ミニゲームそのものもそうだけど、この大会というひとつの大きな枠組みのゲームとして、ハマってきた。

だからもう一回やりたい。

と言ったら鎌田君が「いいですね。でも僕はもう体力の限界です」というのでリタイヤ。TAZZY委員長は仕事が忙しすぎてやってられないということで、近藤君と伏見君の二人だけになっちゃう、というのもつまらない。

そこで、プログラム完全未経験のHidemyに僕がゲームプログラミングを三日でコーチし、大会で闘えるところまで育てることができるか!?という挑戦をしてみることになったよ。そんなこと本当にできるのかね?

続きは以下


実は昨日、alan先生からもらった連載原稿を先に全部出しちゃったのは、まずHidemyにプログラミングを学んでほしかったからなんだ。

正直、教育学部卒で英文学専攻という彼女がどのくらいのスピードでこれをマスターできるかは多いに疑問だったんだよね。

とりあえず昨日の夜、みんなでご飯を食べたあと、「Hidemyはalan先生の原稿を読んでから、自分なりのプログラムを作って提出して」と課題を与えてみた。

それが八時くらい。

そして12時。つまり四時間後だけど、早速Hidemyから課題が届いた。

//おはな
function flower(){
for(i=0;i<180;i++){
if( i<10 ){
move(2);
turn(1);
}if( i>170 ){
move(2);
turn(1);
}else{
move(1);
turn(1);
}
}
}

function onLoad(){
logo.init();
penDown();
for(j=0;j<9;j++){
flower();
turn(90);
}
penUp();
}


これ以外にもふたつのプログラムをつくってきてくれた。

彼女の飲み込みの速さに結構驚いたね。

これならいけるかもしれない

と思ったよ。

そこでalan先生の連載とは別に、僕がゲームプログラミングを教える短期集中連載を始めることにするよ。

alan先生の連載は丁寧でわかりやすいけど、ちょっと時間がかかるので、ここでは一足飛びに僕がゲームを学ぶために必要な教材をまとめてzipにしてみた。

まずはこれをダウンロードしてほしい

ゲームのもと(game.zip)をダウンロード

とはいっても、alan先生の連載とファイル構成は似ている。

違うのは、game.jsというファイルとimgフォルダがあることくらい。

まずはmain.jsをテキストエディタで開いてほしい。

例によって面倒だという人のために、ブラウザ上で試す環境も用意してある。

http://junk.wise9.jp/game/

さて、最初のプログラムはゲームのキャラクターを表示するものだ。

function onLoad() {
banana = new Image('img/banana.png'); // ここでキャラクターを出現
}

このプログラムのポイントは 「new Image」という部分にしかない。

この命令は、新しいImageを作成してbananaという変数に入れろ、という意味になる。

このImageというのは、実はゲームプログラミングを最速で教えるために僕が定義した新しいプログラムだ。
実は、JavaScriptではプログラムの中から別のプログラムの塊を呼び出すことができる。

こういうプログラムの塊を「クラス」とか「ライブラリ」とか言ったりするんだ。
クラスとライブラリは本質的に別のものだけど、今回はそんなことを理解する必要はない。興味が湧いたら自分で調べてみてほしい(きっとそのうちalan先生の連載で扱うだろう)。

とにかく、ゲーム開発に必要なことで、面倒なだけのことはあまりにも多い。
そこで今回はオリジナルのゲームを作るために本当に最低限しかプログラムを書かなくてもいいように教材の方を工夫した。料理で言えばレトルト食品みたいなものだ。
味は最高に良いとは言えないが、誰でも調理できてそこそこ美味しい。そういう連載なのだと思ってほしい。

こうしたクラスにはクラスを設計したプログラマの経験が総て詰まっている。
そのひとつが、このImageクラスというわけだ。

秘伝のタレ、みたいなものだね。

さて、このプログラムを実行するとどうなるか、まずは試してみてほしい。

ここで注意事項。
ゲームプログラムは、過激なプログラムだ。
だから、「ゲームを実行する」というボタンを押したら、止めたりソースコードを書き直したりしたくなったら一度リロードする必要がある。

リロードしても君の書いたコードが消えることはないのでご安心を。

さて、new Imageのあとにつづく謎の文字の説明をしなくてはならない

new Image(‘img/banana.png’);

これは言わずと知れた「ファイル名」である。「img」はフォルダ名を指し、banana.pngはファイル名となる。フォルダとファイル名の間は「/」で繋ぐことになっている。まあこのへんはわりとお馴染みかな。

banana.pngにはバナナの画像が入っている。
バナナには見えないかもしれないが、これは断じてバナナである。
実は今回のzipファイルには、ゲーム作りに最低限必要と思われる画像ファイルをこちらで用意したものを添付してある。

バナナ以外にも、いろいろあるからフォルダを覗いてみてほしい。
さて、次はキャラクターを動かしてみよう。
バナナがひとりでに動く、というのも気持ち悪いので、宇宙船の絵に変えてみる。
以下のようなプログラムを動かしてみてほしい。

function onLoad() {
ship = new Image('img/starship.png');  //A
ship.tick = function(){ //B
this.x = this.x + 1;//C ここで宇宙船の動きを定義する
};
gameStart(); //D
}

いくつか新しい命令が出て来た。

Aの行でImageをshipに代入しているのはいいとして、Bの行はなんだろう?

実はJavaScriptの変数は総てオブジェクト変数といって、数字だけでなくプログラムも入れることができるようになっている。

ship変数のなかにtickという関数を定義しているわけだね。
このtickは一定時間ごとに呼び出される特殊な関数だ。

tickの中身を見てみよう(C)これも単純だね。

this.x = this.x +1 ;

this.xに1を足したものをふたたびthis.xに代入している。
このthisが示すのはこの関数が定義されているオブジェクト自身、この場合はたとえばship自身を指しているんだ。this.xがあるということは当然、this.yもある。しかしこの式はなにをしてるんだ?

実はこれは学校で真面目に数学をやっていると、けっこう混乱してしまう部分のひとつだ。

「こんなthis.xはあり得ない」

と思ってしまうのだ。しかしこの式はあくまでも代入式であって方程式ではない。解くための式ではないのだ。

どうしても意味が分からないのなら、次のようなイメージで理解すると良い。

this.x ← this.x +1 ;

右のthis.xは過去のthis.xであり、左のthis.xは未来のthis.xである。矢印の向きで覚えると良いのだ。

たとえばこの式の実行時点でthis.xの内容が0なら、この式が実行されたあとのthis.xの中身は1になる。

実際、プログラミングで最初につまづくポイントがこの代入式と方程式の違いがわからないというところだったりする。

解ればあまりにも簡単だが、いきなりそれまで習って来たことの前提が覆ってしまうと人はビックリしてしまうものだ。

さて、これを実行すると、宇宙船が画面の中央に現れて、ゆっくり右へ移動していくのが見えると思う。

一定時間ごとにthis.xに値を足していくと、this.xの座標が変わるワケだ。

さて、一回目なのでそろそろやめにしたいが、最後にキャラクターを自分の思うがままに動かすプログラムを示して終わろうと思う。詳しい解説は次回行う。

是非試してみてほしい。

function onLoad() {
ship = new Image('img/starship.png');
ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
this.x += (mouseX-this.x)/10;
this.y += (mouseY-this.y)/10;
};
gameStart();
}