「gl.enchant.js で3dゲーム入門!」2/29 パソナテックエンジニアカフェ...

株式会社ユビキタスエンターテインメント秋葉原リサーチセンター

伏見 遼平

enchant.jsHTML5 + JavaScript Based Game Engine

自己紹介伏見遼平@sidestepism

(株)ユビキタスエンターテインメント秋葉原リサーチセンター9leap & enchant.jsプロジェクトリーダー

JavaScript Lover

今日の流れ

・enchant.js の紹介・ライブコーディング (2Dゲーム)

・gl.enchant.js (WebGLプラグイン) の紹介・ライブコーディング (3Dゲーム)

・まとめ

つかうもの

Webブラウザ

オススメは「Google Chrome」

プログラムはこの中で動きます

プログラムゲーム

実行ボタン

まずボタンを押してみよう

クマが動いた！

クマをもっと速く走らせよう

「bear.x += 1;」の「1」がクマの速さ

速くなったかな?

「bear.x += 1;」を「bear.y += 3;」に変えてみよう

ナナメに移動させるには…

x

y

ナナメに移動させるには…

x

y「bear.x += 3;」 の下に

「bear.y += 3;」 を付け加えよう

やってみよう

クマを大きくするには…?

やってみよう

クマを大きくするには

答え:

scaleX, scaleYを

2に変える

今日のセミナーは

「CodeCast」を使って

ライブコーディング

しながら進めます

このボタンを押してください!

what is enchant.js ?

(Live Coding)

what is enchant.js ?

enchant();

game = new Game(320, 320);game.preload("chara1.gif");

game.onload = function(){ var bear = new Sprite(32, 32); bear.image = game.assets["chara1.gif"]; bear.x = 0; bear.y = 0; bear.scaleX = 1; bear.scaleY = 1; bear.frame = 0; game.rootScene.addChild(bear); bear.addEventListener("enterframe", function(){ if(bear.x < 320 - 32){ bear.x += 1; bear.frame = game.frame % 3; } });}

game.start();

enchant.js でゲームを作る宣言

画面の大きさと、使う画像を設定

クマのオブジェクトをつくる

1フレームごとにポーズを変えて右に動かす

クマを表示する

enchant.js とは?

• 特徴

• 早くて

• 軽くて

• 気持ちいい

enchant.js とは?• コードが短く書ける

• 難しい部分はすべてライブラリに任せる

• ゲームの本質的な部分に集中できる

• ライブラリ自体のコードも短い

2Dレースゲーム…ソースコードは 300行

「Square Racing」http://9leap.net/games/501

シューティングゲーム…ソースコードは 100行

「Simple Shooting」http://9leap.net/games/982/

enchant.js とは?• 拡張性が高い

• JavaScript そのものの拡張性の高さを活かす

• モジュール機構が付属

• ノベルゲーム

• 物理シミュレーション

• 3Dゲーム

UI拡張プラグイン ui.enchant.js

enchant.js とは?• 通信もサポートしやすい

• Twitter連携・データベース読み書き

• node.js + Websocket

• 多人数対戦ネットゲームも作れる!

TakemikazuchiGlobal Game Jam 2012

Twitter連携 + 多人数対戦ネットゲーム

enchant.js とは?

• 学びやすい

• like ActionScript

• 日本語の情報がとにかく多い

gl.enchant.js• enchant.js と同じ触り心地 で3Dゲームを超簡単に

作れる!

what is enchant.js ?

Cross Platform

Mac用ゲーム

Windows用ゲーム

iPhone用ゲーム

Android用ゲーム

HTML5ゲーム

enchant.js の特徴

• OOP

• Event Driven

class hierarchyenchant.Event

• enchant.EventTarget◦ enchant.Game◦ enchant.Node

■ enchant.Entity■ enchant.Sprite■ enchant.Label■ enchant.Map

■ enchant.Group■ enchant.Scene

• enchant.Surface• enchant.Class

JavaScript には

クラスがない!!

enchant.Class.create = function(superclass, definition) { if (arguments.length == 0) { return enchant.Class.create(Object, definition); } else if (arguments.length == 1 && typeof arguments[0] != 'function') { return enchant.Class.create(Object, arguments[0]); }

for (var prop in definition) if (definition.hasOwnProperty(prop)) { if (typeof definition[prop] == 'object' && Object.getPrototypeOf(definition[prop]) == Object.prototype) { if (!('enumerable' in definition[prop])) definition[prop].enumerable = true; } else { definition[prop] = { value: definition[prop], enumerable: true, writable: true }; } } var constructor = function() { if (this instanceof constructor) { constructor.prototype.initialize.apply(this, arguments); } else { return new constructor(); } }; constructor.prototype = Object.create(superclass.prototype, definition); constructor.prototype.constructor = constructor; if (constructor.prototype.initialize == null) { constructor.prototype.initialize = function() { superclass.apply(this, arguments); }; }

return constructor;};

enchant.js では…

var newClass = enchant.class.create( superclass, definition );

// Sprite の定義var enchant.Sprite = enchant.class.create( enchant.Entity, { initialize: function(width, height) { enchant.Entity.call(this); ... },}

enchant.class.create を使います

Node

Entity

Group

Scene

Sprite

Game

Label

表示オブジェクトの基底クラス

表示に用いるDOM上の実体を持ったNode

Nodeを子に持つことができるNode

Gameが管理する特別な Group

メインループや Scene を管理するクラス

画像を表示できる Entity

文字を表示できる Entity

Surface canvas 要素のラッパ

Game

Scene

SpriteSpriteSpriteSprite

var game = new Game(320, 320);

(game.rootScene)

var bear = new Sprite(32, 32);

Game

Scene

SpriteSpriteSpriteSprite

Scene

SpriteSpriteSpriteSprite

var newScene = new Scene();...game.pushScene(newScene);

(Live Coding)

バナナキャッチゲーム

バナナキャッチゲーム

(Live Coding)

Game

Scene

SpriteSpriteSpritebanana

bear

eventListener

eventListener

touchstart,

touchmove

enterframe

9leap ゲーム紹介

グランダリウス

http://9leap.net/games/1092/

iOSゲームの

1ステージを移植

800行程度

プラグイン

• animation

• box2d

• gl (WebGL)

• collada

• physics (ammo)

• nineleap

• socket

• memory

• twitter

• ui

• util

補足

3Dって難しい?

そんなことはない

用語

シェーダ?

shaderコンピュータグラフィックスのシェーダ（英: shader）は、主にライティング（光源計算）・シェーディング（陰影処理）とレンダリング（ピクセル化）を実行するためにグラフィック リソースに対して使用するソフトウェア命令の組み合わせである。「shade」とは「次第に変化させる」「陰影・グラデーションを付ける」という意味で、「shader」は頂点色やピクセル色などを次々に変化させるもの（より具体的に、狭義の意味で言えば関数）を意味する。

GPUが実行するコードを

プログラミングできる

GPUが実行するコードを

プログラミングできる

モデルデータの形式

Collada

COLLADA

• 元々3Dモデルの中間形式

• 色々なモデリングソフトが出力に対応している

• PS3などでも利用されている

• Maya, Poser, PhotoShop, SketchUp, Blender, modo

クオータニオン

クオータニオン

基本は同じ

↓これとか

x

y「bear.x += 3;」 の下に

「bear.y += 3;」 を付け加えよう

クマを大きくするには

答え:

scaleX, scaleYを

2に変える

↓これとか

基本は同じです!!

みなさん知ってましたか?

プログラミングは来年から義務教育

新学習指導要領

2013年から義務教育!

国語　数学理科　社会

プログラミング

我々には夢がある

10年後の世界

日本国民全員をプログラマーにしたい

将来プログラマになる必要はない

プログラミングができると…

その1 新しい言葉・新しい世界を理解できる

その2 アイデアをカタチにして伝えやすい

その3 モノの仕組みや成り立ちがわかる

文化としてのプログラミングの魅力を伝えたい

enchant.jsHTML5 + JavaScript

ゲームエンジン

9leap投稿型ゲームサイト

& コンテスト

ゲームのいいところ

みんな楽しめる終わりがない

いまやっていること

世界中にプログラミングを普及させるプロジェクト

いまやっていること9leap Game Programming Camp•東京・沖縄・仙台・札幌・東京・大阪• 1日でゲーム1本作る

いまやっていること福島ゲームジャム•福島&東京のチーム5名で協力する• 36時間でゲーム1本作る

いまやっていること

• 大手企業の社内研修• 女子向けのプログラミング講座• 30代～40代の主婦を中心にした講座

クマを出す

クマを動かす

タッチすると消える

クマをたくさん出す

ゲームをつくることをゲームのように楽しむ

一億総プログラマー国家の成立へ!!

enchant.jsダウンロード & 説明やサンプルなど

Developers Blog最新情報を確認しよう

wise9.jpUEIのブログメディア

github開発に参加したい方向け

9leapenchant.js で作られたゲームが

たくさん投稿されています

ナインリープ

今すぐ始めたい?

←コレを!! (宣伝)

3分動画でプログラミングが学べる「ドットインストール」にenchant.js 講座があります

公式サイトの Reference を読みながら始めるのがオススメです!

最新の情報は wise9 & Developers Blog で!