連載
» 2013年02月06日 18時00分 公開

enchant.jsでスマホ向けゲームを作り始めるための基礎知識enchant.jsでHTML5+JavaScriptゲーム開発入門(2)(4/4 ページ)

[佐藤浩昭, 大関隆介,ゆめみ]
前のページへ 1|2|3|4       

ある条件で発生する出来事

game.rootScene.addEventListener(Event.ENTER_FRAME, function() {
            kuma.x += 1; // 毎フレーム、くまの座標を右に1pxずつずらす
    });

 「rootScene.addEventListener」とは、SceneなどにEventを追加するメソッドです。ここで「Event」とは、ある指定した条件によって発生する“出来事”のことを指します。「Listener」とは、“Eventを感知して行動をする人のようなもの”です。

 少々分かりづらいと思いますので、例えを出します。例えば、燃えるゴミの日が毎週火曜日だとすると、「毎週火曜日」という条件で発生するEvent「燃えるゴミ出し」を、「住民」というListenerが感知し、それを行うことになります。これを強引にプログラムに当てはめると、このように表現できます。

rootScene.addEventListener(毎週火曜日, function() { 燃えるゴミ出し; } );

毎週火曜日に必ず燃えるゴミ出しを行うイベントを登録する例

 今回はゲームなので、毎週火曜日の項目を「Event.ENTER_FRAME」に置き換えましょう。

画面が毎フレーム更新されるタイミングで発生する出来事

 「Event.ENTER_FRAME」とは、画面が毎フレーム更新されるタイミングで発生するイベントのことを指します。前述のgame.fpsの項目で「24」を設定している場合、1秒間に24回画面が更新されると同時に、このイベントが実行されることになります。

 住民のゴミ出しの部分を「くまを少しだけ移動」とすれば、1秒間に24回、少しずつくまが移動していくことになり、くまが滑らかに移動しているように見えるのです。

game.rootScene.addEventListener(Event.ENTER_FRAME, function() { kuma.x += 1; });

毎フレーム、くまを右に移動させる場合

ユーザーが画面をタッチした瞬間のタイミングで発生するイベント

game.rootScene.addEventListener(Event.TOUCH_START, function(e) { 

 Event.ENTER_FRAMEと同じ書き方で、「Event.TOUCH_START」も追加しています。このイベントは名前の通り、ユーザーが画面をタッチした瞬間のタイミングで発生するイベントです。Event.ENTER_FRAMEと大きく異なる点は、ユーザーの操作によってイベントが実行されることと、タッチした位置をe.xとe.yで取得できるところにあります。

 タッチには「TOUCH_START」(画面に指が触れた瞬間)、「TOUCH_END」(画面から指が離れた瞬間)、「TOUCH_MOVE」(画面に触れて指が移動している間)など、いくつかの状態を指定できます。今回はTOUCH_STARTを使ってみました。

 なお、タッチ系のイベントは、PCだとマウスクリックでも発生します。

if文で、もしもXXなら、●●だ

if ( 条件A ) {
        // 条件Aに当てはまったらやること
  } else if (条件B)
        // 条件Bに当てはまったらやること
  } else {
        // 条件A、Bのいずれにも当てはまらないときにやること
  }

 if文とは、条件文と呼ばれるものの一種で、varと並んで、あらゆるプログラミング言語に登場するほどポピュラーな構文です。プログラミングになじみのない人にとっては分かりづらい点もあるかと思いますが、覚えてしまいましょう。

 「if」は、日本語で「もしも、」という意味があります。ifのカッコの中には条件式と呼ばれる式が入り、「もしも、」「条件式に当てはまれば」実行されます。

条件式で代表的なものとしては、以下の5つがあります。

  • A == B:AとBは等しいか
  • A > B:AはBより大きいか
  • A >=B:AはBと同じか、大きいか
  • A < B:BはAより大きいか
  • A <=B:BはAと同じか、大きいか

 その他にも文字の比較や、boolean式の比較などがありますが、今はこれだけ覚えておいてください。

 なお、ifの後に「else」を加えると、ifの条件式に当てはまらない場合に実行される処理を書くことができます。

 この辺りもJavaScriptの基本的な部分なので、詳しく知りたい人は、@IT記事「初心者のためのJavaScript入門(4)プログラミングのキホン、if文を使ってみよう!」などを覗いてみましょう。

ゲーム機の電源スイッチを入れる

_game.start(); // ゲームを始めます。

 ここでは、ゲームそのものの処理をスタートさせています。gameの初期設定がすべて済んだときにこの文を呼ぶとゲームが開始されます。ちょうど、ゲーム機の電源スイッチを入れるような感覚です。

もしもうまく動かないときは、ブラウザでデバッグ

 もしもうまく動かないときは、PCブラウザのChromeやSafariで該当のページを開き、「F12」キーを押してみてください。「デベロッパーツール」を表示させることができます。

 そこで、[コンソール](もしくは似たような名前の)タブを開くと、赤文字でエラーが起こっている部分が表示されることがありますので、参考にしてみてください。

分かってきたら、自分なりにカスタマイズしてみよう

 連載第2回目は以上です。少々駆け足の解説でしたが、いかがだったでしょうか?

 ソースコードの書き方が分かってきたら、くまを上下にも動かしてみたり、タッチした地点に瞬間移動させてみたりと、自分なりにカスタマイズしてみましょう。

 次回からは、本格的にゲームの内容と、enchant.jsの使い方に触れていきます。

著者プロフィール


大関隆介

2006年に株式会社アローズ・システムズに入社し飲食店検索サイトの要件定義〜運用までを行いPHPやperlなどを利用したサーバサイドの開発からJavaScript(Ajax、jQuery)を使ったクライアントサイドの開発も行う。モバイルに特化した業務がしたいと考えるようになり、2010年10月に株式会社ゆめみに入社し、現在はシステムエンジニアとしてスマートフォンサイトやスマホアプリの提案・設計・開発に従事。最近では、大規模なアプリの開発・運用チームの中心メンバーとして活躍。


佐藤浩昭

2011年に株式会社ゆめみに入社。学生時代はPC向けのFlashコンテンツを制作していた。入社後はフィーチャーフォン向けのPHP+Flash Lite 1.1のWebアプリの制作やenchant.jsを用いたサントリーのゲーム開発に従事し、現在は大手メーカーのAndroidアプリのメイン開発に携わる。Webコンテンツからネイティブアプリまで幅広い知識を持つ


前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。