enchant.js meetup! ショートセッション「enchant.js とは?」

本日はご来場ありがとうございます！

注意事項 •  本日はご来場ありがとうございます！ •  会場はほぼ満員となる予定です。奥から詰めて

おかけください •  休憩はありません。お好きなタイミングでお取

りください •  トイレは部屋を出た左側です。 •  懇親会の会場は3Fです。

•  電源タップの数は限られていますので、欲しい人は近くに座ってください。

•  回線の提供はできませんので、WiFiルータをお持ちの方は回りの方と融通をお願いします。

•  ハッシュタグは #enchantjsmeetup です

タイムテーブル •  ショートセッション×7本です

•  19:00~19:15 「enchant.js 概要説明・ゲームの作り方」 •  19:15~19:30 「enchant.js ライブラリ設計」 •  19:30~19:45 「enchant.js におけるチーム開発手法」 •  19:45~20:00 「プラグイン localStorage.enchant.js」 •  20:00~20:15 「ゲーム開発日誌、私の場合」 •  20:15~20:30 「enchant PRO 概要説明・Live Coding」 •  20:30~21:00 「enchant.js + PRO ロードマップ」 •  21:00~ 懇親会会場に移動

本日はご来場ありがとうございます！

enchant.js HTML5 + JavaScript Based Game Engine

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

伏見遼平

自己紹介 •  伏見遼平 @sidestepism

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

•  1991年生・20歳 •  enchant.js 開発チーム •  JavaScript Lover

秋葉原リサーチセンター •  社内で主に研究開発を担う部署

•  都内の大学生も開発に参加 •  enchant.js のα版を開発したのは東大の1年生

Main Idea

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

what is enchant.js ?

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

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

BASIC

1984

BASIC 　　　　＿__　　　　━┓ 　　　／　―＼　　┏┛ 　　／ノ　　(●)＼　・ .　｜　(●) 　 ⌒）＼ .　｜　　（__ノ￣　　| ちょっとよくわかんないです　　＼　　　　　　　 / 　　　＼　　　　 _ノ　　　　/´　　　｀＼　　　 |　　　　　　　| 　　　 |　　　　　　　|

　　　　　　　　　　＿＿＿　　　━┓ 　　　　　　　　　／　―　　＼　 ┏┛ 　　　　　　　／　　(●)　＼ヽ・　　　　　　/　　（⌒　　(●) / 　　　　　 /　　　￣ヽ__）／ .　　　　／´　　　　　_＿_／　　　　|　　　　　　＼　　　　|　　　　　　　　|


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


できた

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

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

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

where_to_learn_enchant_js.html


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

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

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

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

github •  github

•  Pull Request, Issues

Developers Blog •  enchant.js Developers Blog

•  イベント情報やアップデートを配信 •  JavaScriptのチュートリアルも

Like me!

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

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

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


何がスゴいのか?


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

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

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

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


Cross Platform


各種イベントも開催中

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本作ろう」

ongamestart

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

ongamestart •  弊社清水が講演

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

ongamestart

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

ongamestart

HTML5 GameConference DevCon5

etc...


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


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

(伝聞)


今は

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


じゃあ、enchant.js ならゲームがどんなゲームが作れるの?


see 9leap


じゃあ、enchant.js ならゲームがどんなカンタンに書けるのか?


(Live Coding)


帰ってすぐ書ける! プログラミング講座

前提

• テキストエディタで編集

前提 •  JavaScriptのファイルを、　テキストエディタで編集 → 保存

前提 •  そのJavaScriptを読み込むように指定した　HTMLを、Safariで実行

前提 •  ウインドウ開きっぱなしでいったりきたりする

デバッグスパナのマーク

デバッグ

デバッグ

「JavaScriptコンソール」をオンにする

前提

→ main.js の 15行目でエラー

JavaScript カンどころ •  継承

– クラスはない。プロトタイプ継承 – クラスっぽい書き方ができるパターンはある

var Player = enchant.Class.create(enchant.Sprite, { initialize: function(x, y){ enchant.Sprite.call(this, 16, 16); this.width = this.height = 16; this.x = x; this.y = y; this.frame = 0; this.image = game.assets['graphic.png']; this.addEventListener('enterframe', function(){ if(game.touched && game.frame % 3 == 0){ var s = new PlayerShoot(this.x, this.y); } }); game.rootScene.addEventListener('touchstart', function(e)


詳細なリファレンスは公式サイトのDocumentsから


公式サイトで画像素材も提供しています

9leap •  どこでも遊べるゲーム投稿サイト •  若いプログラマーの育成と発掘を目的としたコンテスト

9leap •  ログイン •  「投稿・編集画面」から「新規投稿」

9leap •  いろんなコンテストも実施中 •  メインコンテスト (後期～12月31日)

–  25歳以下の学生対象です – MacBook Air or Pro 5名 – 通年の最優秀賞3人にはGDC & シリコンバレーツアー

9leap •  9Days Challenge

– 誰でも応募できる – 月初め or 15日から9日間の開催 – 現在は「ピアプロチャレンジ」…日曜日まで!!

今後の展開 •  雑誌連載中です

– 週刊アスキー •  「9leap高校ゲーム開発部」

– 月刊BestGear – トランジスタ技術Jr.

•  「100行で挑戦!ゲームプログラミング道場」

•  書籍も発売予定 …? (まだヒミツ

•  enchant.js はまだまだ発展途上 (v0.4.1) •  機能の追加も予定されています

•  こんな機能が欲しい! という要望は github の issues へ •  こんな機能を作ったから組み込んでくれ! という要望は

githubの pull request からどうぞ

enchant.js

ご静聴ありがとうございました！

タイムテーブル •  ショートセッション×7本です

•  19:00~19:15 「enchant.js 概要説明・ゲームの作り方」 •  19:15~19:30 「enchant.js ライブラリ設計」 •  19:30~19:45 「enchant.js におけるチーム開発手法」 •  19:45~20:00 「プラグイン localStorage.enchant.js」 •  20:00~20:15 「ゲーム開発日誌、私の場合」 •  20:15~20:30 「enchant PRO 概要説明・Live Coding」 •  20:30~21:00 「enchant.js + PRO ロードマップ」 •  21:00~ 懇親会会場に移動

enchant.js meetup! ショートセッション「enchant.js とは?」

Technology