enchant.jsで、楽しくJavascriptプログラミングしませんか?

このエントリーをはてなブックマークに追加
最近めっきりコードを書いていません、しんのすけです。

普段の業務とは少し離れて、ちょいと興味のある事柄についてご紹介を。

これです。

ご存知でしょうか?enchant.jsというJavascriptのフレームワークです。

昔の自分の夢が「ゲームを作る人になる」だったこともあり、ゲームプログラミング等探していたらたまたま出会った代物です。

特徴としては
・和製のフレームワーク
・無料
・HTML5に対応
・オブジェクト指向

といったところです。
「ゲーム」開発用のフレームワークですので、シャノンのビジネスとはあまり関わりがないため、ここに載せようか若干迷いました。が、「技術」ブログだからいいよね、ってことでご了承ください。。。

こいつを使うと何ができるかというと、ブラウザ上で動くゲームをjavascriptだけで作成できます。
なので、基本的にはすべてブラウザ上で完結します。(やりたいことによってはサーバ側の処理も必要だったりしますが。)

以下のページからライブラリ本体、サンプルコード、サンプル素材の一式がダウンロードができますので、まずダウンロードしてみましょう。
http://enchantjs.com/ja/

ダウンロードしたらサンプルがいくつかあるのですが、一番基本となる
「examples\beginner\hellobear/main.js」というサンプルがありますので、それを見ながら解説等々していこうと思います。
main.jsを開くと、以下のようになっています。

enchant();

window.onload = function(){
  var game = new Core(320, 320);
  game.fps = 15;
  game.preload("chara1.png");
  game.onload = function(){
    var 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();
}


ちなみに上記のコードをindex.htmlから実行すると、白いくまさんが画面左上に出現し、右側に向かって
歩き出し、クリックすると消滅します。ゲームじゃないじゃん!ってツッコミは、なしでお願いします。

enchant.jsはオブジェクト指向で、画面上に表示する背景画像やキャラクターはすべてオブジェクトです。最初にCoreオブジェクトというオブジェクトを作成して、画面、背景、キャラクター、音楽、イベント等々をのせていきます。
ここでは320*320のゲーム画面を作成しています。
var game = new Core(320, 320);

画像を表示する際には、一旦Gameオブジェクトに読み込ませてからでないと使用できないようになっていますので、使用する画像はここですべて読み込んでおきます。
ここではchara1.pngというクマの画像のみを読み込んでいます。
game.preload("chara1.png");

次に画面上に表示するキャラクターオブジェクトを作成するのですが、キャラクターを作成する際にはSpriteというオブジェクトを使用して作成します。
ここでは32*32の大きさのキャラクターを作成し、そこに先ほど読み込んだchara1.pngを当てています。
var bear = new Sprite(32, 32);
bear.image = game.assets["chara1.png"];
  bear.x = 0;
  bear.y = 0;

キャラクターを作成したら、今度はその動作を決定します。
サンプルの中では
・キャラクターを歩かせる
・キャラクターがタッチされたら、画面から消える
というアクションを行うようになっています。
bear.addEventListener("enterframe", function(){
  this.x += 1;
  this.frame = this.age % 2 + 6;
});
bear.addEventListener("touchstart", function(){
  game.rootScene.removeChild(bear);
});

最後に、ゲームを開始させて、おわり。
startさせないと始まらないので、お気を付け下さい。。
game.start();

複雑なことをやろうとするともうちょっと長くなってくるのですが、
とりあえずenchant.jsの入門レベルですと、これだけでおしまいです。
短いですよね。
最初に書いたときは本当にこれで動くんかいな?と思いましたが、まあ、しっかり動きました。

本当はこの画面で見せられたらよかったんですが、いかんせんうまく表示させられませんでした、無念。。
Amazon S3にenchant.jsのライブラリとか画像とか置く→ブログのHTML編集画面からソース指定すれば画面に出せることは出せたんですが、そんなPublicな場所に勝手に置いていいんだっけ?とか確認してなかったんで、やめておきました。。

で、以下が僕が触ってみて感じたことのまとめ。
○いいところ
・日本語ドキュメント豊富
→なので、英語が読めない人でもとっつきやすいです。

・落としてくればすぐ体験できる
→サンプルも豊富で、素材もたくさん入ってます。
→すぐに触って動かせるから、「なんか動かないしよくわからんからもういいや」的なやつにはならないはず。

・楽しい
→ブラウザ上でこんなことできるんだな、と感動。

●微妙なところ
・ブラウザの挙動に引っ張られる
→Safariだと表示できないことがあったりしました。(ChromeだとOKだった)
→IE?なんですかそれは?

と、そんなところでしょうか。

なんだか久しぶりに「作ったものが動いたときの感動」を感じることができました。
やっぱり、何かを作るのは楽しいですね!

自分ではないのですが、いろいろの人がenchant.jsで作成した作品が公開されているサイトがあります。
http://9leap.net/

また、WEBサイト上で開発できる環境もあったりします。
http://code.9leap.net/

非常にお手軽で楽しいので、ぜひぜひ、トライしてみてください!!
次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...