「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション
-
Upload
ryohei-fushimi -
Category
Technology
-
view
17.236 -
download
2
description
Transcript of 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション
![Page 1: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/1.jpg)
enchant.js HTML5 + JavaScript Based Game Engine
株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター
伏見 遼平
![Page 2: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/2.jpg)
自己紹介 • 伏見遼平 @sidestepism • 1991年生まれ 20歳
• 株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター “9leap” プロジェクトリーダー
• enchant.js 開発チーム • JavaScript Lover
![Page 3: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/3.jpg)
Main Idea
enchant.js で楽しく ゲームプログラミング!
![Page 4: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/4.jpg)
what is enchant.js ?
![Page 5: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/5.jpg)
what is enchant.js ? • HTML5 + JavaScript ゲームエンジン • 2011年 4月 にリリース • オープンソース (MIT & GPL Dual License) • クロスプラットフォーム
• 東京生まれ、東京育ち • 5ヶ月間で、既に400 本のゲームが開発・公開 • 現在 v0.4.1
![Page 6: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/6.jpg)
what is enchant.js ? • 弊社代表清水の発案
「むかしのBASICみたいなのが欲しい」
![Page 7: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/7.jpg)
BASIC
![Page 8: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/8.jpg)
BASIC ___ ━┓
/ ―\ ┏┛
/ノ (●)\ ・
. | (●) ⌒)\
. | (__ノ ̄ | ちょっとよくわかんないです
\ /
\ _ノ
/´ `\
| |
| |
___ ━┓
/ ― \ ┏┛
/ (●) \ヽ ・
/ (⌒ (●) /
/  ̄ヽ__) /
. /´ ___/
![Page 9: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/9.jpg)
what is enchant.js ?
でも短く書けて軽いし 楽しそう
![Page 10: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/10.jpg)
what is enchant.js ?
できた
![Page 11: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/11.jpg)
what is enchant.js ?
国産だから、日本語の情報も多いのもメリット
すでに130万件以上の記事が存在 !
![Page 12: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/12.jpg)
what is enchant.js ? • 発表直後から各種メディアで話題に
– Gizmodo – ファミ通App – 4Gamer – 週刊アスキー – ブログ「idea x idea」
• チュートリアル, リンクまとめもあります • http://www.ideaxidea.com/archives/2011/04/
where_to_learn_enchant_js.html
![Page 13: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/13.jpg)
9leap • 9leap(ナインリープ)
– どこでも遊べる、投稿型 JavaScript ゲームサイト – ほとんどが enchant.js を用いたゲーム – 2011年5月リリース → 300件以上の投稿!
![Page 14: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/14.jpg)
• 公式サイト http://enchantjs.com/
• Developers Blog http://enchantjs.com/blog
• ダウンロード https://github.com/wise9/enchant.js
what is enchant.js ?
![Page 15: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/15.jpg)
何がスゴいのか?
![Page 16: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/16.jpg)
what is enchant.js ?
• 特徴 – 早くて – 軽くて – 気持ちいい
![Page 17: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/17.jpg)
what is enchant.js ? • コードが短く書ける
– ループやpreload、互換性など面倒な部分はライブラリで吸収 – ゲームの本質的な部分に集中できる – ライブラリ自体のコードも短く、何をしているのか把握しやすい
2Dレースゲーム …ソースコードは 300行、10KB
「Square Racing」 http://9leap.net/games/501
![Page 18: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/18.jpg)
what is enchant.js ? • 拡張性が高い
– JavaScript そのものの拡張性を生かす – プラグインも簡単に書ける
• 「ノベルゲームプラグイン」「3Dゲーム向けプラグイン」 • 物理エンジンもリリース予定
UI拡張プラグイン ui.enchant.js
![Page 19: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/19.jpg)
what is enchant.js ? • 通信もサポートしやすい
– Twitter連携・データベース読み書きプラグイン – node.js + WebSocket を使えば、JavaScriptだけで ネットゲームが作れる !!
See also : 「node.js + socket.io + enchant.js でつくる、リアルタイム
通信ゲーム」
http://wise9.jp/archives/3930
![Page 20: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/20.jpg)
what is enchant.js ?
各種イベントも開催中
![Page 21: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/21.jpg)
what is enchant.js ? • “9leap” Game Programming Camp
– UEI 主催 – 東京、仙台、札幌で開催 – 6時間で enchant.js を学びミニゲームを1本作る
![Page 22: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/22.jpg)
what is enchant.js ? • 福島 Game Jam
– IGDA Japan & UEI 主催 – 被災地をゲーム作りで応援 – 即席チームで協力し、30時間でゲームを作る – 6チームが enchant.js を採用
![Page 23: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/23.jpg)
what is enchant.js ? • 社内Hackathon
– 「14時間でネットゲームを3本作ろう」 – 「8時間でTwitter連携ゲームを10本作ろう」
• enchant.js の効率の良さ & 気持ちよさ
![Page 24: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/24.jpg)
ongamestart
世界初の HTML5 ゲームカンファレンス ongamestart
![Page 25: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/25.jpg)
ongamestart • 弊社 清水が講演
![Page 26: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/26.jpg)
ongamestart • パンフレットでも紹介
![Page 27: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/27.jpg)
ongamestart
• ほかにも Canvas based の 3Dゲームエンジン「Origami 3D」など • 詳しくは http://wise9.jp/ にレポートを掲載してますよ!
![Page 28: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/28.jpg)
ongamestart
世界からも注目を集めてます
![Page 29: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/29.jpg)
what is enchant.js ?
Webや携帯で遊べるゲームといえば …Flash & Flash Lite?
![Page 30: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/30.jpg)
what is enchant.js ?
今は
No more Flash そもそもiPhoneで動かないし
![Page 31: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/31.jpg)
what is enchant.js ?
Flash Lite には 配列がないらしい
(伝聞)
![Page 32: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/32.jpg)
what is enchant.js ?
Flash Liteには配列がないらしい!! (衝撃)
ex.) 10個の変数をつくる
num = 10; for(i = 0; i < num; i++){ eval("array" add i) = random(10); }
![Page 33: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/33.jpg)
what is enchant.js ?
!!! 人間の書くコードではない !!!
![Page 34: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/34.jpg)
what is enchant.js ?
じゃあ、enchant.js なら どのくらいカンタンに書けるのか?
![Page 35: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/35.jpg)
what is enchant.js ?
( Live Coding )
![Page 36: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/36.jpg)
what is enchant.js ?
game
rootScene
bear
func.on () {…}
func.on () {…}
Game
Scene
Sprite
addEvent Listener
addEvent Listener
addChild
![Page 37: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/37.jpg)
what is enchant.js ?
enchant.js でカンタンに ゲームプログラミング
![Page 38: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/38.jpg)
one more thing…
![Page 39: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/39.jpg)
enchant PRO
![Page 40: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/40.jpg)
enchant PRO • JavaScriptの限界 – あくまで SandBox 内での実行 – できないこともたくさん
• カメラへのアクセス • ファイルシステムへのアクセス • 写真撮影や画像認識 • OpenGL • ソースコードの隠蔽
• でもJavaScriptを使って書きたい
![Page 41: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/41.jpg)
enchant PRO
JavaScriptの限界? ↓
なんとかして打破したい
![Page 42: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/42.jpg)
enchant PRO
できた
![Page 43: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/43.jpg)
enchant PRO
![Page 44: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/44.jpg)
enchant PRO
30行で書ける !!
![Page 45: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/45.jpg)
enchant PRO • Android 向け開発環境 • Webview の中で JavaScript を実行 • 必要に応じて Android の API を叩ける • UI は HTML5 + CSS で書ける • + ネイティブアプリにコンパイルされないので動的な更新が可能
Android アプリも JavaScriptで書こう!
![Page 46: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/46.jpg)
enchant PRO
「どういう仕組み?」
![Page 47: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/47.jpg)
enchant PRO
絶賛開発中 10月上旬リリース予定です
お楽しみに!
![Page 48: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/48.jpg)
発表のまとめ
enchant.js + PRO で楽しく プログラミング!
![Page 49: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/49.jpg)
ありがとうございました!
![Page 50: 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション](https://reader030.fdocument.pub/reader030/viewer/2022020110/5597926f1a28ab48798b46b8/html5/thumbnails/50.jpg)
Information • 公式サイト
http://enchantjs.com/ • Developers Blog
http://enchantjs.com/blog
• ダウンロード https://github.com/wise9/enchant.js