Your SlideShare is downloading. ×
0
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;」に変えてみよう
ナナメに移動させるには…              xy
ナナメに移動させるには…     x         「bear.x += 3;」 の下にy         「bear.y += 3;」 を付け加えよう
やってみようクマを大きくするには…?
やってみようクマを大きくするには        答え:        scaleX, scaleYを        2に変える
今日のセミナーは「CodeCast」を使ってライブコーディング しながら進めます
このボタンを押してください!
what is enchant.js ?     (Live Coding)
what is enchant.js ?enchant.js でゲームを作る宣言   enchant();                       game = new Game(320, 320);画面の大きさと、            ...
enchant.js とは?• 特徴  • 早くて  • 軽くて  • 気持ちいい
enchant.js とは?•   コードが短く書ける    •   難しい部分はすべてライブラリに任せる    •   ゲームの本質的な部分に集中できる    •   ライブラリ自体のコードも短い         2Dレースゲーム      ...
enchant.js とは?•   拡張性が高い    •   JavaScript そのものの拡張性の高さを活かす    •   モジュール機構が付属        •   ノベルゲーム        •   物理シミュレーション      ...
enchant.js とは?•   通信もサポートしやすい    •   Twitter連携・データベース読み書き    •   node.js + Websocket    •   多人数対戦ネットゲームも作れる!              ...
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 hierarchy  enchant.Event• enchant.EventTarget   ◦ enchant.Game   ◦ enchant.Node      ■ enchant.Entity         ■ ench...
JavaScript にはクラスがない!!
enchant.js では…enchant.Class.create = function(superclass, definition) {    if (arguments.length == 0) {        return ench...
enchant.class.create を使いますvar newClass = enchant.class.create( superclass, definition );// Sprite の定義var enchant.Sprite = ...
Game                       メインループや Scene を管理するクラスNode                       表示オブジェクトの基底クラス          Entity           表示に用い...
Game                    var game = new Game(320, 320);  Scene                 (game.rootScene)          Sprite           S...
var newScene = new Scene();Game                    ...                        game.pushScene(newScene);  Scene            ...
(Live Coding)
バナナキャッチゲーム
バナナキャッチゲーム
(Live Coding)
Game                       touchstart,                       touchmove  Scene                                     eventLis...
9leap ゲーム紹介
グランダリウス                   iOSゲームの                   1ステージを移植                   800行程度http://9leap.net/games/1092/
プラグイン•   animation                         •   nineleap•   box2d                             •    socket•   gl (WebGL)    ...
補足
3Dって難しい?
そんなことはない
用語
シェーダ?
shaderコンピュータグラフィックスのシェーダ(英: shader)は、主にライティング(光源計算)・シェーディング(陰影処理)とレンダリング(ピクセル化)を実行するためにグラフィック リソースに対して使用するソフトウェア命令の組み合わせであ...
GPUが実行する    コードをプログラミングできる
GPUが実行する    コードをプログラミングできる
モデルデータの形式  Collada
COLLADA• 元々3Dモデルの中間形式• 色々なモデリングソフトが出力に対応  している• PS3などでも利用されている• Maya, Poser, PhotoShop, SketchUp,  Blender, modo
クオータニオン
クオータニオン
基本は同じ
↓これとか    x        「bear.x += 3;」 の下にy        「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 で!
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1
Upcoming SlideShare
Loading in...5
×

「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1

6,045

Published on

Published in: Technology

Transcript of "「gl.enchant.js で3Dゲーム入門!」2/29 パソナテックエンジニアカフェ 講演資料その1"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×