「enchant.js & PRO」第21回 html5とか勉強会ショートセッション

enchant.js HTML5 + JavaScript Based Game Engine

株式会社ユビキタスエンターテインメント秋葉原リサーチセンター

伏見遼平

自己紹介 •  伏見遼平 @sidestepism •  1991年生まれ 20歳

•  株式会社ユビキタスエンターテインメント秋葉原リサーチセンター “9leap” プロジェクトリーダー

•  enchant.js 開発チーム •  JavaScript Lover

Main Idea

enchant.js で楽しくゲームプログラミング!

what is enchant.js ?

what is enchant.js ? •  HTML5 + JavaScript ゲームエンジン •  2011年 4月にリリース •  オープンソース (MIT & GPL Dual License) •  クロスプラットフォーム

•  東京生まれ、東京育ち •  5ヶ月間で、既に400 本のゲームが開発・公開 •  現在 v0.4.1

what is enchant.js ? •  弊社代表清水の発案

「むかしのBASICみたいなのが欲しい」

BASIC 　　　　＿__　　　　━┓

　　　／　―＼　　┏┛

　　／ノ　　(●)＼　・

.　｜　(●) 　 ⌒）＼

.　｜　　（__ノ￣　　| ちょっとよくわかんないです

　　＼　　　　　　　 /

　　　＼　　　　 _ノ

　　　　/´　　　｀＼

　　　 |　　　　　　　|

　　　 |　　　　　　　|

　　　　　　　　　　＿＿＿　　　━┓

　　　　　　　　　／　―　　＼　 ┏┛

　　　　　　　／　　(●)　＼ヽ・

　　　　　　/　　（⌒　　(●) /

　　　　　 /　　　￣ヽ__）／

.　　　　／´　　　　　_＿_／


でも短く書けて軽いし楽しそう


できた


国産だから、日本語の情報も多いのもメリット

すでに130万件以上の記事が存在 !

what is enchant.js ? •  発表直後から各種メディアで話題に

–  Gizmodo – ファミ通App –  4Gamer – 週刊アスキー – ブログ「idea x idea」

•  チュートリアル, リンクまとめもあります •  http://www.ideaxidea.com/archives/2011/04/

where_to_learn_enchant_js.html

9leap •  9leap（ナインリープ）

– どこでも遊べる、投稿型 JavaScript ゲームサイト – ほとんどが enchant.js を用いたゲーム –  2011年5月リリース → 300件以上の投稿!

•  公式サイト http://enchantjs.com/

•  Developers Blog http://enchantjs.com/blog

•  ダウンロード https://github.com/wise9/enchant.js


何がスゴいのか?


• 特徴 – 早くて – 軽くて – 気持ちいい

what is enchant.js ? •  コードが短く書ける

–  ループやpreload、互換性など面倒な部分はライブラリで吸収 –  ゲームの本質的な部分に集中できる –  ライブラリ自体のコードも短く、何をしているのか把握しやすい

2Dレースゲーム …ソースコードは 300行、10KB

「Square Racing」 http://9leap.net/games/501

what is enchant.js ? •  拡張性が高い

–  JavaScript そのものの拡張性を生かす –  プラグインも簡単に書ける

•  「ノベルゲームプラグイン」「3Dゲーム向けプラグイン」 •  物理エンジンもリリース予定

UI拡張プラグイン ui.enchant.js

what is enchant.js ? •  通信もサポートしやすい

–  Twitter連携・データベース読み書きプラグイン –  node.js + WebSocket を使えば、JavaScriptだけでネットゲームが作れる !!

See also : 「node.js + socket.io + enchant.js でつくる、リアルタイム

通信ゲーム」

http://wise9.jp/archives/3930


各種イベントも開催中

what is enchant.js ? •  “9leap” Game Programming Camp

–  UEI 主催 – 東京、仙台、札幌で開催 –  6時間で enchant.js を学びミニゲームを1本作る

what is enchant.js ? •  福島 Game Jam

–  IGDA Japan & UEI 主催 – 被災地をゲーム作りで応援 – 即席チームで協力し、30時間でゲームを作る –  6チームが enchant.js を採用

what is enchant.js ? •  社内Hackathon

– 「14時間でネットゲームを3本作ろう」 – 「8時間でTwitter連携ゲームを10本作ろう」

•  enchant.js の効率の良さ & 気持ちよさ

ongamestart

世界初の HTML5 ゲームカンファレンス ongamestart

ongamestart •  弊社清水が講演

ongamestart •  パンフレットでも紹介

ongamestart

•  ほかにも Canvas based の 3Dゲームエンジン「Origami 3D」など •  詳しくは http://wise9.jp/ にレポートを掲載してますよ！

ongamestart

世界からも注目を集めてます


Webや携帯で遊べるゲームといえば …Flash & Flash Lite?


今は

No more Flash そもそもiPhoneで動かないし


Flash Lite には配列がないらしい

(伝聞)


Flash Liteには配列がないらしい!! (衝撃)

ex.) 10個の変数をつくる

num = 10; for(i = 0; i < num; i++){ eval("array" add i) = random(10); }


!!! 人間の書くコードではない !!!


じゃあ、enchant.js ならどのくらいカンタンに書けるのか?


( Live Coding )


game

rootScene

bear

func.on () {…}

func.on () {…}

Game

Scene

Sprite

addEvent Listener

addEvent Listener

addChild


enchant.js でカンタンにゲームプログラミング

one more thing…

enchant PRO

enchant PRO •  JavaScriptの限界 – あくまで SandBox 内での実行 – できないこともたくさん

•  カメラへのアクセス •  ファイルシステムへのアクセス •  写真撮影や画像認識 •  OpenGL •  ソースコードの隠蔽

•  でもJavaScriptを使って書きたい

enchant PRO

JavaScriptの限界? ↓

なんとかして打破したい

enchant PRO

できた

enchant PRO

enchant PRO

30行で書ける !!

enchant PRO •  Android 向け開発環境 •  Webview の中で JavaScript を実行 •  必要に応じて Android の API を叩ける •  UI は HTML5 + CSS で書ける •  + ネイティブアプリにコンパイルされないので動的な更新が可能

Android アプリも JavaScriptで書こう!

enchant PRO

「どういう仕組み?」

enchant PRO

絶賛開発中 10月上旬リリース予定です

お楽しみに!

発表のまとめ

enchant.js + PRO で楽しくプログラミング!

ありがとうございました!

Information •  公式サイト

http://enchantjs.com/ •  Developers Blog

http://enchantjs.com/blog

•  ダウンロード https://github.com/wise9/enchant.js

「enchant.js & PRO」第21回 html5とか勉強会ショートセッション

Technology

Transcript of 「enchant.js & PRO」第21回 html5とか勉強会ショートセッション

「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション

Technology

Transcript of 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション

「enchant.js & PRO」第21回 html5とか勉強会ショートセッション

Transcript of 「enchant.js & PRO」第21回 html5とか勉強会ショートセッション