「gl.enchant.js で3dゲーム入門!」2/29 パソナテックエンジニアカフェ...
TRANSCRIPT
![Page 1: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/1.jpg)
株式会社ユビキタスエンターテインメント秋葉原リサーチセンター
伏見 遼平
enchant.jsHTML5 + JavaScript Based Game Engine
![Page 2: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/2.jpg)
自己紹介伏見遼平@sidestepism
(株)ユビキタスエンターテインメント秋葉原リサーチセンター9leap & enchant.jsプロジェクトリーダー
JavaScript Lover
![Page 3: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/3.jpg)
今日の流れ
・enchant.js の紹介・ライブコーディング (2Dゲーム)
・gl.enchant.js (WebGLプラグイン) の紹介・ライブコーディング (3Dゲーム)
・まとめ
![Page 4: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/4.jpg)
つかうもの
Webブラウザ
![Page 5: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/5.jpg)
オススメは「Google Chrome」
![Page 6: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/6.jpg)
プログラムはこの中で動きます
![Page 7: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/7.jpg)
プログラムゲーム
実行ボタン
![Page 8: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/8.jpg)
まずボタンを押してみよう
![Page 9: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/9.jpg)
![Page 10: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/10.jpg)
クマが動いた!
![Page 11: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/11.jpg)
クマをもっと速く走らせよう
「bear.x += 1;」の「1」がクマの速さ
![Page 12: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/12.jpg)
速くなったかな?
「bear.x += 1;」を「bear.y += 3;」に変えてみよう
![Page 13: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/13.jpg)
ナナメに移動させるには…
x
y
![Page 14: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/14.jpg)
ナナメに移動させるには…
x
y「bear.x += 3;」 の下に
「bear.y += 3;」 を付け加えよう
![Page 15: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/15.jpg)
やってみよう
クマを大きくするには…?
![Page 16: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/16.jpg)
やってみよう
クマを大きくするには
答え:
scaleX, scaleYを
2に変える
![Page 17: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/17.jpg)
今日のセミナーは
「CodeCast」を使って
ライブコーディング
しながら進めます
![Page 18: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/18.jpg)
このボタンを押してください!
![Page 19: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/19.jpg)
what is enchant.js ?
(Live Coding)
![Page 20: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/20.jpg)
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フレームごとにポーズを変えて右に動かす
クマを表示する
![Page 21: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/21.jpg)
enchant.js とは?
• 特徴
• 早くて
• 軽くて
• 気持ちいい
![Page 22: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/22.jpg)
enchant.js とは?• コードが短く書ける
• 難しい部分はすべてライブラリに任せる
• ゲームの本質的な部分に集中できる
• ライブラリ自体のコードも短い
2Dレースゲーム…ソースコードは 300行
「Square Racing」http://9leap.net/games/501
シューティングゲーム…ソースコードは 100行
「Simple Shooting」http://9leap.net/games/982/
![Page 23: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/23.jpg)
enchant.js とは?• 拡張性が高い
• JavaScript そのものの拡張性の高さを活かす
• モジュール機構が付属
• ノベルゲーム
• 物理シミュレーション
• 3Dゲーム
UI拡張プラグイン ui.enchant.js
![Page 24: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/24.jpg)
enchant.js とは?• 通信もサポートしやすい
• Twitter連携・データベース読み書き
• node.js + Websocket
• 多人数対戦ネットゲームも作れる!
TakemikazuchiGlobal Game Jam 2012
Twitter連携 + 多人数対戦ネットゲーム
![Page 25: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/25.jpg)
enchant.js とは?
• 学びやすい
• like ActionScript
• 日本語の情報がとにかく多い
![Page 26: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/26.jpg)
gl.enchant.js• enchant.js と同じ触り心地 で3Dゲームを超簡単に
作れる!
![Page 27: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/27.jpg)
what is enchant.js ?
Cross Platform
![Page 28: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/28.jpg)
Mac用ゲーム
Windows用ゲーム
iPhone用ゲーム
Android用ゲーム
![Page 29: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/29.jpg)
HTML5ゲーム
![Page 30: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/30.jpg)
enchant.js の特徴
• OOP
• Event Driven
![Page 31: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/31.jpg)
![Page 32: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/32.jpg)
![Page 33: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/33.jpg)
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
![Page 34: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/34.jpg)
JavaScript には
クラスがない!!
![Page 35: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/35.jpg)
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 では…
![Page 36: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/36.jpg)
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 を使います
![Page 37: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/37.jpg)
Node
Entity
Group
Scene
Sprite
Game
Label
表示オブジェクトの基底クラス
表示に用いるDOM上の実体を持ったNode
Nodeを子に持つことができるNode
Gameが管理する特別な Group
メインループや Scene を管理するクラス
画像を表示できる Entity
文字を表示できる Entity
Surface canvas 要素のラッパ
![Page 38: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/38.jpg)
Game
Scene
SpriteSpriteSpriteSprite
var game = new Game(320, 320);
(game.rootScene)
var bear = new Sprite(32, 32);
![Page 39: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/39.jpg)
Game
Scene
SpriteSpriteSpriteSprite
Scene
SpriteSpriteSpriteSprite
var newScene = new Scene();...game.pushScene(newScene);
![Page 40: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/40.jpg)
![Page 41: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/41.jpg)
(Live Coding)
![Page 42: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/42.jpg)
バナナキャッチゲーム
![Page 43: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/43.jpg)
バナナキャッチゲーム
![Page 44: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/44.jpg)
(Live Coding)
![Page 45: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/45.jpg)
Game
Scene
SpriteSpriteSpritebanana
bear
eventListener
eventListener
touchstart,
touchmove
enterframe
![Page 46: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/46.jpg)
9leap ゲーム紹介
![Page 47: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/47.jpg)
グランダリウス
http://9leap.net/games/1092/
iOSゲームの
1ステージを移植
800行程度
![Page 48: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/48.jpg)
プラグイン
• animation
• box2d
• gl (WebGL)
• collada
• physics (ammo)
• nineleap
• socket
• memory
• ui
• util
![Page 49: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/49.jpg)
![Page 50: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/50.jpg)
補足
![Page 51: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/51.jpg)
3Dって難しい?
![Page 52: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/52.jpg)
そんなことはない
![Page 53: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/53.jpg)
用語
![Page 54: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/54.jpg)
シェーダ?
![Page 55: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/55.jpg)
shaderコンピュータグラフィックスのシェーダ(英: shader)は、主にライティング(光源計算)・シェーディング(陰影処理)とレンダリング(ピクセル化)を実行するためにグラフィック リソースに対して使用するソフトウェア命令の組み合わせである。「shade」とは「次第に変化させる」「陰影・グラデーションを付ける」という意味で、「shader」は頂点色やピクセル色などを次々に変化させるもの(より具体的に、狭義の意味で言えば関数)を意味する。
![Page 56: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/56.jpg)
GPUが実行するコードを
プログラミングできる
![Page 57: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/57.jpg)
![Page 58: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/58.jpg)
GPUが実行するコードを
プログラミングできる
![Page 59: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/59.jpg)
モデルデータの形式
Collada
![Page 60: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/60.jpg)
COLLADA
• 元々3Dモデルの中間形式
• 色々なモデリングソフトが出力に対応している
• PS3などでも利用されている
• Maya, Poser, PhotoShop, SketchUp, Blender, modo
![Page 61: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/61.jpg)
クオータニオン
![Page 62: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/62.jpg)
クオータニオン
![Page 63: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/63.jpg)
基本は同じ
![Page 64: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/64.jpg)
↓これとか
x
y「bear.x += 3;」 の下に
「bear.y += 3;」 を付け加えよう
![Page 65: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/65.jpg)
クマを大きくするには
答え:
scaleX, scaleYを
2に変える
↓これとか
![Page 66: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/66.jpg)
基本は同じです!!
![Page 67: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/67.jpg)
![Page 68: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/68.jpg)
みなさん知ってましたか?
![Page 69: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/69.jpg)
プログラミングは来年から義務教育
![Page 70: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/70.jpg)
新学習指導要領
2013年から義務教育!
![Page 71: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/71.jpg)
国語 数学理科 社会
プログラミング
![Page 72: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/72.jpg)
我々には夢がある
![Page 73: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/73.jpg)
10年後の世界
![Page 74: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/74.jpg)
日本国民全員をプログラマーにしたい
![Page 75: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/75.jpg)
将来プログラマになる必要はない
![Page 76: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/76.jpg)
プログラミングができると…
その1 新しい言葉・新しい世界を理解できる
その2 アイデアをカタチにして伝えやすい
その3 モノの仕組みや成り立ちがわかる
![Page 77: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/77.jpg)
文化としてのプログラミングの魅力を伝えたい
![Page 78: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/78.jpg)
enchant.jsHTML5 + JavaScript
ゲームエンジン
9leap投稿型ゲームサイト
& コンテスト
![Page 79: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/79.jpg)
ゲームのいいところ
みんな楽しめる終わりがない
![Page 80: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/80.jpg)
いまやっていること
世界中にプログラミングを普及させるプロジェクト
![Page 81: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/81.jpg)
いまやっていること9leap Game Programming Camp•東京・沖縄・仙台・札幌・東京・大阪• 1日でゲーム1本作る
![Page 82: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/82.jpg)
いまやっていること福島ゲームジャム•福島&東京のチーム5名で協力する• 36時間でゲーム1本作る
![Page 83: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/83.jpg)
いまやっていること
• 大手企業の社内研修• 女子向けのプログラミング講座• 30代~40代の主婦を中心にした講座
![Page 84: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/84.jpg)
クマを出す
クマを動かす
タッチすると消える
クマをたくさん出す
![Page 85: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/85.jpg)
ゲームをつくることをゲームのように楽しむ
![Page 86: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/86.jpg)
一億総プログラマー国家の成立へ!!
![Page 87: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/87.jpg)
![Page 88: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/88.jpg)
enchant.jsダウンロード & 説明やサンプルなど
![Page 89: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/89.jpg)
Developers Blog最新情報を確認しよう
![Page 90: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/90.jpg)
wise9.jpUEIのブログメディア
![Page 91: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/91.jpg)
github開発に参加したい方向け
![Page 92: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/92.jpg)
9leapenchant.js で作られたゲームが
たくさん投稿されています
ナインリープ
![Page 93: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/93.jpg)
今すぐ始めたい?
![Page 94: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/94.jpg)
←コレを!! (宣伝)
![Page 95: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/95.jpg)
3分動画でプログラミングが学べる「ドットインストール」にenchant.js 講座があります
![Page 96: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/96.jpg)
公式サイトの Reference を読みながら始めるのがオススメです!
![Page 97: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/97.jpg)
最新の情報は wise9 & Developers Blog で!
![Page 98: 「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1](https://reader034.vdocuments.pub/reader034/viewer/2022052223/558783c9d8b42a977d8b461d/html5/thumbnails/98.jpg)