CodeIQ MAGAZINECodeIQ MAGAZINE

小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る(後編)#5jcup #html5j

2014.08.06 Category:技術コラム Tag: , , , , ,

  • 27
  • このエントリーをはてなブックマークに追加

HTML5+JavaScriptをベースとしたゲームエンジンenchant.jsを使って、ゲームアプリを作る講義をUEI清水亮氏に受ける小学生プログラマ・シュン君。

後編は面白いゲームを作るためのワークショップから、実際にゲームを作る上で必要な概念について。大学生でも正直難しいという清水氏の講義をシュン君は理解できるのか!?
by 馬場美由紀 (CodeIQ中の人)

清水氏の説明で三角関数を理解するシュン君

前半までで、enchant.jsに関する基礎的な説明はひと通り終了。
「ここまで説明しただけでも、シュン君ならゲームが作れてしまうかもしれないけど、ほかにどこかわからないところはない?」と、清水氏が質問を促す。

さっそく、疑問をぶつけるシュン君。

シュン:カウント何秒で、何か動かすという設定が知りたいです。

清水:あっ、それは簡単です。実はさっきは触れずにいたんだけれど、プロパティのひとつに「age」というのがあるんです。「age」ってどういう意味かわかるかな?

シュン:年齢?

清水:正解!「age」は、1フレーム進むたびに年齢(時間軸)が1つ上がっていく、という考え方。そういえば、三角関数は知っているかな?
例えばこんなふうに指定するんだけれど……。

▲清水氏は例文を書き込みながら、シュン君に説明する

シュン:うーん…これはわからないや。

清水:三角関数はちょっと難しかったかな。まあ、呪文だと思って見ておいて。ほら、こうするとキャラクターにジグザグの動きをさせることができる。これが三角関数で指定したところです。

シュン:ああ、見たことがある!sin、cosとかいうやつだ!

清水:おお、わかってるね。そして、「age」っていうのは……。(数値をageに書き換え)書き換える前には、2と指定してあったけれど、それをageに変えてみた。その場合、どうなると思う?

シュン:うーん……あっ、そうだ!1つずつ増えていくんだから、だんだん動きが大きくなるんじゃないかな。

清水:その通り。

清水:さて、今のはキャラクターに付随したプロパティの指定だったけど、ゲームの進行そのものを管理したいという場合もあるよね。

そういう場合には、さっきは説明しなかったけれど、「game.rootScene」というオブジェクトを使います。rootSceneっていうのは、つまり、画面全体だね。

これもまた、x.yの座標を持っていて、動かすことができます。扱いは、Spriteなどと同じね。こうすると、画面全体が動くようになります。

清水:ほかに何かあるかな?

ここでシュン君から質問が出てたのが、ゲームだとお馴染みの「衝突判定」について。ここでも、逆に清水氏からシュン君に、「衝突判定かあ。普段のゲーム作りではどんなふうにしているの?」と、最初に質問が出る。

シュン:普段は四角形を重ねています。

清水:バウンディング・ボックスだね。実を言うと、enchant.jsの場合は、衝突判定が極端に簡略化されたやり方になっています。たとえば、enchantjs.comにLive Sampleとして掲載してあるシューティングゲームの例では……。

※サンプル・プログラム、http://enchantjs.comより

var hits = Apple.intersect(Enemy);
    for(var i = 0, len = hits.length; i < len; i++){
        game.rootScene.removeChild(hits[i][0]);
        game.rootScene.removeChild(hits[i][1]);
        score ++;
    }

清水:実はこの中のこの部分(hits=Apple.intersect(Enemy)だけ!これは、従来のものと全然違っていて、ある意味野蛮なやり方なんだけれども(笑)。「リンゴが複数あって、敵が複数いるときに、当たったオブジェクトを全部『hits』に格納して、この配列にあるもの全部消せ」ということにしてある。

「面白いゲーム」って、何なんだろう?

さてenchant.js基礎講座が一段落して、清水氏が「小学生でこれを聞いた人はいないよ」と画面に映し出したのは「ゲーム企画のウォーミングアップ」というスライド。

プログラミングするスキルがあり、それでゲームが「書けた」としても、それが面白いかどうかは、また別の話。確かに、「プログラムがうまく書けている=ゲームがきちんと動く」ことは、ゲームを楽しむ上で大事な要素ではあるが、そのプログラムが表しているゲームの“中身”にプレイヤーを惹きつけるものがなければ、面白いゲームにはなりえない。

清水:では、面白いゲームはどうしたらできるの?――まさにこれから実際にゲームを作るにあたって外してはいけない約束事と心構えが、この話のメインテーマ。まず、ゲーム作りの手順というものがあります。

  1. テーマを決める
  2. ミニマムなゲームスペックを決める
  3. 作る
  4. 遊ぶ
  5. 改善点を考えて3に戻る

この繰り返しです。

シュン君もすでに感覚的に理解できていると思うけど、大事なのはまずは本当に小さなプログラムを組み立てること。それを遊んでみて、何がつまらないか、もっと面白くするにはどうしたらいいか考えるということ。その辺の基本は『雨を避ける男』を見ても、もうできていると思う。

ここで出てきた「雨を避ける男」というのは、以前にシュン君がC#で開発したというゲーム。画面の上から降ってくる雨粒を、ケータイのジャイロを左右に傾けることでキャラクターを操作して避ける、というもの。

清水:そのあたりを、もう一度、きちんと最初から考えてみようと思う。

ゲームのテーマはどうやって決める?

清水:第一に、テーマをどうやって決めるのかということ。まずは、プログラムの中身を想像できるようなゲームを設定する、今日聞いた範囲でシュン君なら、以前に作った「雨を避ける男」くらいのプログラムは、enchant.jsを使って作れてしまうと思います。

もっともただ作るだけではなくて、同時に自分のパワーアップも図れるようにしたいという場合には、ほんのちょっと難しいくらいのレベルを設定するといいと思う。

もう一つのアプローチは、既存の、面白いと思うゲームをコピーする。作りながら切り口を変えていく。新しい要素を追加し、その時に既存の要素を削っていく。一個追加したら、一個削るという具合にね。

そして絵や舞台、ストーリーをまったく変えてみる。一番大事なことだけれど、『自分は天才じゃない』というのを自覚するというのがポイントです。

清水:こんなふうに、次々に元になるものがあって、そして新しいものが生まれてくるわけです。だから僕が思うに――。『目指すべきは、天才パクリ職人』

画面に映されたのは、『すべてのゲームはパクリである』というスローガン。なんだか人聞きが悪いように思えるが、これにはきちんと裏づけがある。どんな優れた技術や製品も、必ず、それに先立つ、別の人の成果がある。だからこと、人も技術も、「次のステップに進む」ことができるという。

すぐれた先行作品を、「上手にパクり、自分のものにしていくことを恐れるな」というのが、この話のポイント。実はこの段の話、清水氏がMIT(マサチューセッツ工科大学)での講演に使った資料を日本語に訳したものだとか。

そして、話は本題のゲーム作りに戻る

清水:というわけで、とりあえず自分の好きなものをテーマに選ぶこと。この時に、どんどん、自分が好きなゲームを思い浮かべて、その要素を取り入れていったらいいと思います。

テーマが決まったら、スケッチを描いてみて、イメージを掴む。最初のスケッチはいたずら書き程度のもので結構。紙のノートでも、手描きタブレットでもいい。ただ、経線がないもので、筆記具は抑揚がつけられる筆ペンやサインペンがいいと思う。そして、一度描いたら、それを清書して、アイデアを明確化していく。

そのゲームデザインには、3つの要素があると、清水氏は言う。1つは、全体の動き。次に、ゲームオーバーになる条件。そして最後の1つが、スコアの付け方。

  • 全体の動き
  • ゲームオーバーになる条件
  • スコアの付け方

この3つの要素が、「そのゲームを、ずっと遊びたいと思うかどうか」の分かれ道になるというのだ。

清水:よくありがちな間違いは、誰がどうやっても同じ点数になるゲームを作ってしまうこと。例えばリンゴ1個取ったら10点として、画面にリンゴが10個しか出てこない。これじゃあ、誰がやっても最高100点しか取れないでしょう?

だから、取る順番とか取り方とかで、人によってスコアが変わるようにする。うまく工夫して取ると、その分、スコアが上がっていくようにする。

さっきの例で言えば、リンゴ1個が10点として、そこに、バナナ20点を加える。そして例えば、2回続けてリンゴを取れば、スコアが2倍になる。すると、あるシーンでここでバナナが来たから取ろうか、それともリンゴを続けて取れるように待とうか。どちらが高い点数を期待できるか、人それぞれに計算するポイントが出てきますよね。

これはひとつの例だけど、スコアは遊び方によって何十倍にも変わったほうが、遊びがいが出てくる。そして、「次にやったら、もっとうまくできるに違いない」と思わせる。そうすると、ずっと遊びたいゲーム、何度も遊べる面白いゲームになるわけです。

▲このあたりは「なるほど!」と思わされるポイント。シュン君も一つひとつの説明に大きく頷いている

先ほどから、実際にenchant.jsを使ったゲーム作りをしてみたくてうずうずしてきているシュン君に、ここでついに清水氏からゴーサイン。

清水:では、実際にゲームのアイデアをまとめて、ゲーム作りに入ってみよう。まずはアイデア出しのスケッチから。せっかくなので、シュン君に頭の中のモヤモヤしたアイデアを、今回はホワイトボードにスケッチとして描き出してもらおうと思います。僕たち大人はこの部屋から出るので、自由にアイデアを考えてください。

▲ホワイトボードに向かってアイデアを描き続けるシュン君

さて、シュン君の新しいゲームのラフスケッチはいかに。

いよいよ本番、ゲーム作りに

会議室でもくもくとアイデアを描きつづるシュン君。

そしておよそ30分後。ホワイトボードに描かれたシュン君のゲームのアイデアが完成した。どうやら、宇宙船が進路を阻む壁を避けながら進んでいくというゲームのようだ。「なるほど、なるほど」と、清水氏。シュン君からはさっそく、障害物となる壁の生成法について質問が出る。

清水:じゃあ、例えばこういうやり方でどうかな。barVとbarHを作って、それで、barVは、こんなふうに座標x.yから、そしてbarHのほうはこんなふうに、ここまで勝手に壁を作ってくれる。

▲垂直の壁、水平の壁の生成法などを説明する清水氏

//縦に隕石を並べる
barV = function(x,y,h){
    for(var i=0;i<h;i+=16){
        var b = new Block(x,y+i);
    }
}
//横に隕石を並べる
barH = function(x,y,w){
    for(var i=0;i<w;i+=16){
        var b = new Block(x+i,y);
    }
}

シュン:ああ!なんか、こういう感じですね。じゃあ、2次元配列とかはどうですか?

清水:必要ない。やってもいいけれど、たぶんかなり時間がかかってしまうんじゃないかな。これはこれで、処理速度が遅くなってしまうかもしれないけれど、とりあえず、これで様子を見てみようか。最終的に2次元配列が必要になったら、それはそれでできるから。まずはブロックのクラスを作るところからね。

なるべくスマートなやり方を探して真剣なやり取りを繰り返す2人だが、とりあえず決着が付いたらしい。その後も、最初にクラスを設定する手順、キャラクター絵の選択など、いくつか確認しながら、シュン君はPCのキーボードをたたきき始める。

ちなみに、選び出した宇宙船のキャラクターは、JAXA公認の「はやぶさ」の絵だ。さまざまな苦難を乗り越えて宇宙を進むゲームにはふさわしい。

再び三角関数と向き合うシュン君

初期設定を書き進めていたシュン君から、ここでまた質問。

シュン:宇宙船の動かし方って、どうしたらいいんですか?

清水:うん、そこは問題だね。そもそも、いろいろなやり方があるんだけど、どういうふうに動かすのがいいかな?

例えば、宇宙船が画面にここにこうあるとして……。

シュン:ケータイで動かすことを考えると、加速度センサーを使ったほうがいいんでしょうか。こっち側を押したらこう行って、こっち側を押したらこんなふうに……。

清水:では、例えば、pの座標をpx、pyとして、宇宙船の位置はスターシップだから、記号はsにしようか。座標はsx、syとする。(px-sx)*0.1として……。

清水氏に、touchendイベントの処理について教えてもらい、宇宙船がクリックした場所にワープするプログラムを書くシュン君。しかし、どうも思ったように動かないらしい。

シュン:押しているときはできないんです。

清水:押しているときに動くなら、touchendじゃなくてtouchmoveだね。でもこのゲームにはちょっと向いていない指定かもしれない。ちなみに、今、どんな動きを指定しているのかを説明しましょう。

▲宇宙船の動き方の説明にベクトルの概念を書き始める清水氏

清水:ここで、タッチされた場所と、宇宙船を結ぶ直線があるよね。で、『ここに行きたいなー』っていう座標、これをベクトルと呼びます。この矢印の起点から、終点に向けて動かしていきたいわけですが、今の処理は、このベクトルに0.1を掛けたものを、移動量として足しているわけです。つまり、常に長さの1/10ずつ進んでいる。今、宇宙船の動くスピードが違ってくるのがわかるかな。

シュン:うん、わかります。だんだん遅くなっちゃう。だんだん距離は短くなって、その1/10だから遅くなっちゃうんですね。

清水:そう。このやり方だとそうなってしまうね。さっき、「この手のゲームにはあまり向いていないかもしれない」と言ったのは、そういう理由です。では今度は、それを一定にするやり方を考えてみよう。ちなみに、三角関数って知ってるかな?

シュン:さっき、波のような動きをさせるときに使ったやつですね。

清水:そうだね。では、これは知ってるかな?直角三角形の辺の長さには、三平方の定理というのがあるんだ。

シュン:うーん、知らないです。

▲ちなみに「三平方の定理(ピタゴラスの定理)」は、中学3年生で習うもの。小学6年生のシュン君が知らないのは当然

清水:でもこれは便利だから覚えたほうがいい。これは、昔、ピタゴラスというオジサンが考えた定理で、a、b、cという三辺の直角三角形があったときに、その長さは、c^2=a^2+b^2。なぜかというのと今考えても仕方がなくて、とにかくそういうものだと覚えておけばいいと思う。

さっきのベクトル斜辺として、直角三角形を描いてみる。そのときこの直角三角形に当てはめてみるとどうかな?宇宙船の現在地と目的地、それぞれの座標のtxマイナスxは、この三角形でいえばどこだろう?

シュン君は、しばらく考え込んだ後に、

シュン:ああ、他の2辺が、それぞれxの移動とyの移動になるんだ!

これには清水氏も、思わず感嘆。

清水:そう!それで、欲しいのは斜辺の長さだね。そうすると、x、y、それぞれの差で、先ほどの三平方の定理を使って、最初のベクトルの長さが導き出せてしまうわけです。c^2=a^2+b^2だから、こちらの2 辺それぞれの^2を足して、その平方根を求めればいい。√はJavaScript の場合は、「Math.sqrt」という命令で呼び出すことができます。これで試してみよう。

▲清水氏がシュン君に説明したホワイトボードの画面

シュン:あっ、うまく動いた!

こうして一つひとつ出てくる問題を潰していきながら、ゲーム作りは進んでいく。その後も宇宙船爆発シーンの作成、画面スクロールの方法など、いくつかの山場を越え……完成!

まだまだシェイプアップの余地はあるものの、「なかなかいいできですよ、これは」と、清水氏。

enchant.jsの最初のレクチャーからおよそ3時間で、ひとまずの完成を迎えることができたのだった。

「好きこそものの上手なれ」を体現するシュン君

「これだけの時間でできたのも、彼がゲームというものを最初からきちんと理解していたからだと思います」というのが、本日の清水氏の総括である。とはいえ、やはりゲームに必要なさまざまな要素を、簡単に設定していけるenchant.js便利さあってのことだというのも、また事実。

「ああ、なるほど」「それはどういうこと?」――生徒が大人でもハードな内容かもしれないと思うのだが、わかれば納得、わからなければ質問と、シュン君は積極的に講義に食いついていく。

もしもこれが、無理にやらされている勉強だったら、ちょっと難しいと思っただけで、すぐにやる気をなくしてしまうかもしれない。けれど、自分が面白いと思ってやっていることなら……そして、わからないことが出てきても、それがわかるようになれば、きっと、もっと面白いとと思うなら、内容がどんなに難しくても、ワクワク感は持続する。

シュン君を見ているとまさにそうで、「好きこそものの上手なれ」という言葉は本当なのだなと、すんなり納得できる。

清水氏による濃密な特別講義が終わった休憩時間さえも、手直しに没頭しているシュン君なのだった。

──次回「enchant.jsのゲームをWindowsストアアプリにしてみよう」に続く!

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 27
  • このエントリーをはてなブックマークに追加

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...
HTML5、C#を使ったスマートフォン・タブレット向けアプリ開発を基礎から学ぼう!... 中学1年生になったシュン君とゲームアプリ問題に挑戦! タブレットやスマートフォンのエンタープライズ環境への導入が増えているとはいえ、そのような端末向けのアプリケーション開発に携わっているITエンジニアはまだまだ少ない。 今回のキャンペーン問題は、「HTML5/JavaScript」と「XAML/...
【最終回】シュン君のゲームをChrome Web Storeで公開してみよう!#5jcup #htm... Chrome Appsとは何か? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)、アシアル生形可奈子氏(スマートフォン編)。 ラストを飾るGoogle Developer...
Monacaでenchant.jsで作ったHTML5ゲームを、シュン君とスマートフォンに移植してみよ... なぜ、スマートフォンアプリ化する必要があるの? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)。 そして次なるターゲットは、スマートフォンアプリ移植。講師には、アシアル株...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ