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 を読み込むだけです.

読み込んだあとは下のようなコードでゲームプログラミング!!

DEMO

// おまじない
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章〜

実際に作ったゲーム

実際に作ったゲームはこちら

http://jsdo.it/phi/devsumi2013

メモ

/*
 * 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

@phi_jp

TM Life

devsumi_enchantjs

By phi

devsumi_enchantjs

10,047

ゲーム開発

ライブコーディング

自己紹介

enchant.js スマートフォンゲーム開発講座

Web 開発のススメ

従来のゲーム開発

めんどい!!

Web 技術を使ったゲーム開発

らくちん:D

ユーザにとっても Happy:D

Webアプリ vs ネイティブアプリ

enchant.js って？

enchant.js とは

enchant.js を使うメリット

使い方

enchant.js セットアップ

画像を読み込む

スプライトを生成, 表示

おまけにタッチ操作

ライブコーディング

実際に作ったゲーム

メモ

まとめ

Web だと楽に開発できるよ♪enchant.js 使えば更に楽になるよ♪♪ゲームプログラミング楽しいよ♪♪♪

ご清聴ありがとうございました

devsumi_enchantjs

More from phi

Web だと楽に開発できるよ♪
enchant.js 使えば更に楽になるよ♪♪
ゲームプログラミング楽しいよ♪♪♪