-入門- enchant.js でゲームを作ろう

- 入門 -
enchant.js でゲームを作ろう

by nico
2013.02.25 @ TechBuzz

1/21

自己紹介

名前：nico（@nico0927）
仕事：WEB ディレクター
　　　（フリーランス）

分野：企画～デザイン～サーバーサイドまで
　　　浅く広く。元は HTML+CSS+JS コーダー。
最近：WEB 制作・WEB リテラシー講座の講師。
　　　WEB マーケティング勉強中。

2/21

ゲームを作ってみたい！

C/C++/Objective-C ？
OpenGL ？めんどくさい！

もっと簡単に作れないの？

3/21

enchant.js http://enchantjs.com

HTML5 + JS ベースのゲーム開発ライブラリ
オープンソース（MIT ライセンス）

4/21

enchant.js なら ...

ブラウザ + エディタだけで開発できる
Win/Mac・iOS/Android 対応
Firefox・Chrome・Safari・IE9 ～ etc... 対応
豊富なプラグイン

5/21

できました！

「つちねこ集め」「SUPER TAINYANS」

6/21

- 解説 1 -
enchant.js の使い方

7/21

まずは読み込み
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> テストゲーム </title>
</head>
<body>
<div id="enchant-stage"></div>

<script src="enchant.js"></script>
<script src="test.game.js"></script>
</body> 新規作成
</html>

8/21

test.game.js の中身
enchant();

window.onload = function(){
var game = new Game(320, 320);

game.onload = function(){
// ここにゲーム内容を書いてく
}

game.start();
}

9/21

ステージに何かを表示する
enchant();

window.onload = function(){
var game = new Game(320, 320);
game.preload('chara1.png');// ゲームで使う素材を読み込む

game.onload = function(){
var kuma = new Sprite(32,32);
kuma.image = game.assets['chara1.png'];
game.rootScene.addChild(kuma);// クマを配置
}

game.start();
}

10/21

表示したものをキー入力で動かす

// キー入力でクマを動かす
kuma.onenterframe = function(){
if(game.input.right){
this.x += 1;
}
}

11/21

- 解説 2 -
enchant.js の特徴の一つ
“クラス定義と継承”

12/21

JS でのクラス定義と継承
Kuma = function(){ プロトタイプベース
}
Kuma.prototype.gaooo = function(){
alert(" ガオオオ！ ");
}

Higma = function(){
}
Higma.prototype = new Kuma(); ← 継承！

var higma = new Higma();
higma.gaooo();

13/21

enchant.js でのクラス定義と継承
Kuma = Class.create({ クラスベースっぽく
initialize: function(){
}, 書ける！
gaooo: function(){
alert(" ガオオオ！ ");
}
});

Higma = Class.create(Kuma,{ ← 継承！
initialize:function(){
}
});

var higma = new Higma();
higma.gaooo();

14/21

- 解説 3 -
便利なプラグイン

15/21

enchant.js の後に読み込んで使う
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> テストゲーム </title>
</head>
<body>
<div id="enchant-stage"></div>

<script src="enchant.js"></script>
<script src="ui.enchant.js"></script>
<script src="test.game.js"></script>
</body>
</html>

16/21

ui.enchant.js

タッチパッド表示用のプラグイン
（公式サイトからダウンロードの zip に同梱）

var pad = new Pad();
pad.moveTo(10,370);
game.rootScene.addChild(pad);

とかで、ステージにパッドを設置。
→ スマホから操作可能に！

※別途、ui.enchant.js 内でパッド
　画像へのパスを通す

17/21

tl.enchant.js

時間に沿った動きを管理するプラグイン
（ui ～と同じくダウンロードの zip に同梱）

（例）
higma.tl.delay(24).then(function(){
this.gaooo();
});

→ 24 フレーム後（game.fps = 24 なら 1 秒後）
　にガオオオ！発動

18/21

- まとめ -
本日の要点

19/21

→ enchant.js ならゲーム開発が超手軽に
（しかもマルチプラットフォーム）

→ 独自のクラス定義でクラスベースっぽく書ける

→ 同梱のプラグインで楽々カスタマイズ

20/21

- おしまい -

- 入門 - enchant.js でゲームを作ろう
by nico（@nico0927）

21/21

-入門- enchant.js でゲームを作ろう

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to -入門- enchant.js でゲームを作ろう (20)

-入門- enchant.js でゲームを作ろう