タグ: プログラミング

お盆の連休前にダウンロードしたenchant.jsですが、お恥ずかしながら今日まで何も始めていませんでした。さすがにこれではイカンと思い、まずは仕様の確認から始めました。

githubからダウンロードしたZIPファイルを解凍し、実際に動かせるモノはないかと物色したところ、「examples」フォルダがありましたので開いてみます。examplesフォルダ内に「beginner」「expert」「plugins」とありますので、まずは beginnerフォルダを開きます。

beginnerフォルダの中身は以下のような感じ。

・hellobearフォルダ
  ・index.html(ブラウザで表示するためのファイル)
  ・main.js(アニメーションなどメインの処理が記述されたプログラム)
  ・ui.enchant.js(UIを定義したプログラム)
これをブラウザ上で動かしてみるとこんな感じです。【サンプル

実際にどういった記述で動いているかを見てみましょう。

index.htmlはmain.jsとenchant.jsを呼び出しているだけのファイルなので、特筆することはありませんので、画面の実際に動作を定義しているmain.jsを見ていきます。

[main.js]
enchant();
   window.onload = function(){
   var game = new Game(
320, 320);
   game.preload("
chara1.png");
   game.onload = function(){
      bear = new Sprite(
32, 32);
      bear.image = game.assets["
chara1.png"];
      bear.x =
0;
      bear.y =
0;
      bear.frame =
5;
      game.rootScene.addChild(bear);
        bear.addEventListener("
enterframe", function(){
        
this.x += 1;
        this.frame =
this.age % 2 + 6;
        bear.addEventListener("touchstart", function(){
        game.rootScene.removeChild(bear);
        });
      };
    game.start();
};

※実際のプログラム内には仕様に関するコメントが記述されているのでプログラムの知識がなくてもある程度理解できるようになっています。


では一つづつ見ていきます。


enchant();
enchant.jsを利用するのに必要な処理です。これによりenchant.jsやプラグインで定義されているクラスを各々呼び出したプログラムで利用することが可能になります。

window.onload = function(){
ページの読み込みが開始されたときに実行される関数です。すべての処理はこの関数内で実行されることになります。

var game = new Game(320, 320);
ゲームオブジェクトの定義をします。Gameクラスのインスタンスを作成した時にゲーム画面のサイズを代入します。
new Game(横幅のサイズ[ピクセル], 横幅のサイズ[ピクセル]);

game.fps = 15;
fps(frame per second)、つまり一秒間の画面の更新回数を定義します。デフォルトでは15になっていますので、この数値を調整することでスピード感を調整で出来ます。ためしに100で設定するとこんな感じになります。
サンプル
new Game(横幅のサイズ[ピクセル], 横幅のサイズ[ピクセル]);

game.preload("chara1.png");
ゲームが開始される前に、ゲームに必要な画像などの素材をすべて前もってロードしておくための処理です。これによってゲーム中の動作が鈍ったりすることを防ぎます。ビギナー用のサンプルではchara1.pngしか使いませんが、必要に応じてファイルを指定する必要があります。

game.onload = function(){
ロード完了後に実行する処理の定義を記述します。

bear = new Sprite(32, 32);
オブジェクトの表示についての定義を行います。Spriteクラスのインスタンスを作成して(bearというSpriteオブジェクトの作成と言い換えられます。)表示サイズの初期値を代入します。
new Sprite(横幅のサイズ[ピクセル], 横幅のサイズ[ピクセル]);

bear.image = game.assets["chara1.png"];
表示する画像の指定を行います。先ほどのgame.preload()で前もってロードしておいた素材はgame.assetsにて格納されるので、その中から表示したい画像を指定します。

bear.x = 0;
bear.y =
0;
作成したSpriteオプジェクト「bear」のX座標と、Y座標の初期値を設定します。これを例えばbear.x = 50; bear.y = 50;という数値に変更したら、以下のような感じでクマが現れる最初の場所が変わります。
サンプル

bear.frame = 5;
 先ほど、Sptiteオブジェクトを作成したときの横32px×縦32pxのサイズでフレームを区切り、左上から数えて5番目に位置する箇所を一番初めに表示するための記述です。(chara1.pngは実際には以下のような画像で、左上から五番目にあたるのが白クマの立ち絵にあたります。)
chara1

game.rootScene.addChild(bear);
オブジェクト(bear)をノードツリーに追加するメソッドです。Game.rootScene は Group を継承した Scene クラスのインスタンスで、描画ツリーのルートになる特別な Scene オブジェクト。この rootScene に描画したいオブジェクトを子として追加する (addChild) ことで、毎フレーム描画されるようになります。

game.rootScene.addChild(bear);
Spriteオブジェクト(bear)をノードツリーに追加するメソッドで、この記述により、オブジェクトを子として追加することでbearを毎フレーム描画されるようになります。

bear.addEventListener("enterframe", function(){
this.x +=
1;
this.frame =
this.age % 2 + 6;
});
EventTarget#addEventListener(event, listener)
イベント取得時に行う処理(リスナ)について定義するコンストラクタ。
ここの処理を簡単に説明すると、新しいフレームを描画する前"enterframe"のとき、X座標を1ずつ移動し、その度にクマの画像が切り替わるようにフレームの処理を行うということになります。
 this.ageはオブジェクトの描画回数のことで、 % 2 はageを2で割ったときの余り、すなわち0か1となります。それに6を加算するので6→7→6→7番目のフレームを繰返して表示することを意味します。 

bear.addEventListener("touchstart", function(){
ame.rootScene.removeChild(bear);});
ここでの処理は、"touchstart"(クリックもしくはタップ)したとき、クマの』オブジェクトを文字通りrootSceneのツリーから除外する指定になっています。

game.start();
ゲームスタートの関数を実行します。

まずは、サンプルから雰囲気をつかむことから始めました。今後はここから機能を拡張していきたいと思います。_blankspan style=160color: #FF0000;span style=span style= ゲームスタートの関数を実行します。


お盆の時期が到来しました。


せっかくのまとまった休みだけど、特に予定もないのでどうしようか思案していましたが、

プログラムの練習にもいいんじゃないかとの同僚の勧めもあり、

enchant.jsを使って簡単なゲームでも作ってみようと思います。


少し前に下の動画が話題になったので知って方の多いと思いますが、

enchant.jsはプログラム初心者にもやさしいブラウザゲーム用のオープンソースライブラリです。

リポジトリ:https://github.com/wise9/enchant.js


enchant.jsで10分間でシューティングゲームを作る!



解説とコードの記述はenchant.jsを開発したUEI(株式会社ユビキタスエンターテイメント)の代表の清水氏自らによるもの。

なんというか、凄すぎる。。実に見ごたえのある動画ですね。


こんな感じで(10分じゃないよ?)連休中はゲーム制作にチャレンジしてみようと思います。