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

  • 5,736 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,736
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
20
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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