「gl.enchant.js で3dゲーム入門!」2/29 パソナテックエンジニアカフェ...
TRANSCRIPT
株式会社ユビキタスエンターテインメント秋葉原リサーチセンター
伏見 遼平
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
• 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 で!