enchant.js スマートフォン
ゲーム開発
ライブコーディング
15-D-5 phi(ファイ)
自己紹介
- 名前 ... phi(ファイ)
- 言語 ... C/C++, Python, JavaScript
- 年齢 ... 24 歳
- 仕事 ... 某ソーシャルゲーム会社に勤務
- Twitter ... @phi_jp
- Blog ... TM Life
- 参考書の執筆
- enchant.js スマートフォンゲーム開発講座 - enchant.js開発のレシピ
enchant.js スマートフォンゲーム開発講座
Step by Step でenchant.js, ゲームプログラミングを
学べる!!
Web 開発のススメ
～ Webアプリ vs ネイティブアプリ ～
従来のゲーム開発
C/C++ や Objective-C といったコンパイラ言語を使い
OpenGL (ES) や DirectX といったライブラリを使って開発
例)
-
コードをコンパイルできる環境を用意
-
描画ライブラリを使える環境を用意
-
コーディング
-
コンパイル
- 実行ファイル出力
めんどい!!
環境のセットアップだとか, 修正する度コンパイルとか
やってらんない!!
Web 技術を使ったゲーム開発
HTML5 + JavaScript(主にCanvas) で開発.
テキストファイルのままブラウザで開いて実行.
コンパイル, インストール不要!!
例)
-
enchant.js を読み込んでコーディング
- ブラウザにドラッグ & ドロップで実行
らくちん:D
ユーザにとっても Happy:D
Webアプリ ...
URL にアクセスするだけで Play できる
ネイティブアプリ ...
専用ストアでダウンロード, インストール して Play
Webアプリ vs ネイティブアプリ
比較表
enchant.js って？
enchant.js とは
JavaScript + HTML5 をベースとした
ゲーム開発ライブラリ
enchant.js を使うメリット
-
簡単に画像表示やラベル表示といったことができる
- ひとつのコードで PC とスマホ同時対応
-
豊富なプラグイン
-
9leap との連携で簡単ゲーム投稿
-
WebGL に対応した gl.enchant.js なんてのもある
使い方
script タグで enchant.js を読み込むだけです.
読み込んだあとは下のようなコードでゲームプログラミング!!
// おまじない
enchant();
var IMAGE = "http://enchantjs.com/wordpress/wp-content/uploads/2012/09/chara1.png";
window.onload = function() {
// ゲーム
var game = new Game();
game.preload(IMAGE);
// シーン
var scene = game.currentScene;
scene.onenter = function() {
// スプライト
var sprite = new Sprite(32, 32);
sprite.image = game.assets[IMAGE];
scene.addChild(sprite);
// タッチイベント
scene.ontouchmove = function(e) {
sprite.x = e.x;
sprite.y = e.y;
};
};
game.start();
};
enchant.js セットアップ
おまじないと Game クラスの生成
// おまじない enchant(); var IMAGE = "http://enchantjs.com/wordpress/wp-content/uploads/2012/09/chara1.png"; window.onload = function() { // ゲーム var game = new Game(); game.preload(IMAGE); // シーン var scene = game.currentScene; scene.onenter = function() { // スプライト var sprite = new Sprite(32, 32); sprite.image = game.assets[IMAGE]; scene.addChild(sprite); // タッチイベント scene.ontouchmove = function(e) { sprite.x = e.x; sprite.y = e.y; }; }; game.start(); };
画像を読み込む
preload で画像を読み込む
// おまじない enchant(); var IMAGE = "http://enchantjs.com/wordpress/wp-content/uploads/2012/09/chara1.png"; window.onload = function() { // ゲーム var game = new Game(); game.preload(IMAGE); // シーン var scene = game.currentScene; scene.onenter = function() { // スプライト var sprite = new Sprite(32, 32); sprite.image = game.assets[IMAGE]; scene.addChild(sprite); // タッチイベント scene.ontouchmove = function(e) { sprite.x = e.x; sprite.y = e.y; }; }; game.start(); };
スプライトを生成, 表示
Sprite を生成し, 画像を登録, シーンに追加
// おまじない
enchant();
var IMAGE = "http://enchantjs.com/wordpress/wp-content/uploads/2012/09/chara1.png";
window.onload = function() {
// ゲーム
var game = new Game();
game.preload(IMAGE);
// シーン
var scene = game.currentScene;
scene.onenter = function() {
// スプライト
var sprite = new Sprite(32, 32);
sprite.image = game.assets[IMAGE];
scene.addChild(sprite);
// タッチイベント
scene.ontouchmove = function(e) {
sprite.x = e.x;
sprite.y = e.y;
};
};
game.start();
};
おまけにタッチ操作
タッチイベント時に実行する関数を登録し,
その中で sprite をタッチした座標に動かす.
// おまじない
enchant();
var IMAGE = "http://enchantjs.com/wordpress/wp-content/uploads/2012/09/chara1.png";
window.onload = function() {
// ゲーム
var game = new Game();
game.preload(IMAGE);
// シーン
var scene = game.currentScene;
scene.onenter = function() {
// スプライト
var sprite = new Sprite(32, 32);
sprite.image = game.assets[IMAGE];
scene.addChild(sprite);
// タッチイベント
scene.ontouchmove = function(e) {
sprite.x = e.x;
sprite.y = e.y;
};
};
game.start();
};
ライブコーディング
〜 enchant.js スマートフォンゲーム開発講座 5章 〜
実際に作ったゲーム
実際に作ったゲームはこちら
メモ
/*
* constant
*/
var SCREEN_WIDTH = 300;
var SCREEN_HEIGHT = 300;
var SCREEN_CENTER_X = SCREEN_WIDTH/2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;
// プレイヤー
var PLAYER_WIDTH = 32;
var PLAYER_HEIGHT = 32;
var PLAYER_JUMP = -5; // ジャンプの強さ
var PLAYER_GRAVIRY = 0.25; // 重力
// エネミー
var ENEMY_WIDTH = 32;
var ENEMY_HEIGHT = 32;
// 画像
var PLAYER_IMAGE = "http://www.shoeisha.co.jp/book/shuchu/enchantsample/chapter05/player.png";
var ENEMY_IMAGE = "http://www.shoeisha.co.jp/book/shuchu/enchantsample/chapter05/enemy.png";
var ICON_IMAGE = "http://www.shoeisha.co.jp/book/shuchu/enchantsample/chapter05/icon0.gif";
var BACKGROUND_IMAGE = "http://www.shoeisha.co.jp/book/shuchu/enchantsample/chapter05/background.png";
// アセット
var ASSETS = [
PLAYER_IMAGE, ENEMY_IMAGE, ICON_IMAGE, BACKGROUND_IMAGE
];
// global
var game = null;
まとめ
Web だと楽に開発できるよ♪
enchant.js 使えば更に楽になるよ♪♪
ゲームプログラミング楽しいよ♪♪♪
ご清聴ありがとうございました
phi