• Like
enchant.js meetup! ショートセッション「enchant.js とは?」
Upcoming SlideShare
Loading in...5
×

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

  • 3,019 views
Uploaded on

 

  • 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
3,019
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
8
Comments
0
Likes
2

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. 本日はご来場ありがとうございます!
  • 2. 注意事項•  本日はご来場ありがとうございます!•  会場はほぼ満員となる予定です。奥から詰めて おかけください•  休憩はありません。お好きなタイミングでお取 りください•  トイレは部屋を出た左側です。•  懇親会の会場は3Fです。•  電源タップの数は限られていますので、欲しい 人は近くに座ってください。•  回線の提供はできませんので、WiFiルータをお 持ちの方は回りの方と融通をお願いします。•  ハッシュタグは #enchantjsmeetup です
  • 3. タイムテーブル•  ショートセッション×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 懇親会会場に移動
  • 4. 本日はご来場ありがとうございます!
  • 5. enchant.jsHTML5 + JavaScript Based Game Engine株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター 伏見 遼平
  • 6. 自己紹介•  伏見遼平 @sidestepism•  株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター 9leap プロジェクトリーダー•  1991年生・20歳•  enchant.js 開発チーム•  JavaScript Lover
  • 7. 秋葉原リサーチセンター•  社内で主に研究開発を担う部署•  都内の大学生も開発に参加•  enchant.js のα版を開発したのは東大の1年生
  • 8. Main Ideaenchant.js で楽しくゲームプログラミング!
  • 9. what is enchant.js ?
  • 10. what is enchant.js ?•  弊社代表清水の発案 「むかしのFAMILY BASICみたいなのが欲しい」
  • 11. BASIC 1984
  • 12. BASIC
  • 13. BASIC      ___    ━┓     / ―\   ┏┛   /ノ  (●)\  ・ . | (●)   ⌒)\ . |   (__ノ ̄  | ちょっとよくわかんないです   \        /     \     _ノ     /´     `\      |       |      |       |            ___   ━┓          / ―  \  ┏┛         /  (●)  \ヽ ・        /   (⌒  (●) /        /      ̄ヽ__) / .    /´     ___/     |        \     |        |
  • 14. what is enchant.js ? でも、短く書けて 軽いし楽しそう
  • 15. what is enchant.js ? できた
  • 16. what is enchant.js ?•  発表直後から各種メディアで話題に –  Gizmodo –  ファミ通App –  4Gamer –  週刊アスキー –  ブログ「idea x idea」 •  チュートリアル, リンクまとめもあります •  http://www.ideaxidea.com/archives/2011/04/ where_to_learn_enchant_js.html
  • 17. what is enchant.js ?国産だから、日本語の情報も多いのもメリット すでに130万件以上の記事が存在 !
  • 18. 9leap•  9leap(ナインリープ) –  どこでも遊べる、投稿型 JavaScript ゲームサイト –  ほとんどが enchant.js を用いたゲーム –  2011年5月リリース → 300件以上の投稿!
  • 19. github•  github •  Pull Request, Issues
  • 20. Developers Blog•  enchant.js Developers Blog •  イベント情報やアップデートを配信 •  JavaScriptのチュートリアルも
  • 21. Like me!
  • 22. what is enchant.js ?•  公式サイト http://enchantjs.com/•  Developers Blog http://enchantjs.com/blog•  ダウンロード https://github.com/wise9/enchant.js
  • 23. 何がスゴいのか?
  • 24. what is enchant.js ?•  特徴 – 早くて – 軽くて – 気持ちいい
  • 25. what is enchant.js ?•  コードが短く書ける –  ループやpreload、互換性など面倒な部分はライブラリで吸収 –  Event Driven (like ActionScript) –  ゲームの本質的な部分に集中できる –  ライブラリ自体のコードも短く、何をしているのか把握しやすい 2Dレースゲーム …ソースコードは 300行、10KB 「Square Racing」 http://9leap.net/games/501
  • 26. what is enchant.js ?•  拡張性が高い –  JavaScript そのものの拡張性を生かす –  プラグインも簡単に書ける •  「ノベルゲームプラグイン」「3Dゲーム向けプラグイン」 •  物理エンジンもリリース予定 UI拡張プラグイン ui.enchant.js
  • 27. what is enchant.js ?•  通信もサポートしやすい –  Twitter連携・データベース読み書きプラグイン –  node.js + WebSocket を使えば、JavaScriptだけで ネットゲームが作れる !! See also : 「node.js + socket.io + enchant.js でつくる、リアルタイム 通信ゲーム」 http://wise9.jp/archives/3930
  • 28. what is enchant.js ? Cross Platform
  • 29. what is enchant.js ?各種イベントも開催中
  • 30. what is enchant.js ?•  9leap Game Programming Camp –  UEI 主催 –  東京、仙台、札幌、沖縄で開催 –  6時間で enchant.js を学びミニゲームを1本作る
  • 31. what is enchant.js ?•  福島 Game Jam –  IGDA Japan & UEI 主催 –  被災地をゲーム作りで応援 –  即席チームで協力し、30時間でゲームを作る –  6チームが enchant.js を採用
  • 32. what is enchant.js ?•  社内Hackathon –  「14時間でネットゲームを3本作ろう」 –  「8時間でTwitter連携ゲームを10本作ろう」
  • 33. what is enchant.js ?•  社内Hackathon –  「14時間でネットゲームを3本作ろう」 –  「8時間でTwitter連携ゲームを10本作ろう」
  • 34. ongamestart世界初の HTML5 ゲームカンファレンス ongamestart
  • 35. ongamestart•  弊社 清水が講演
  • 36. ongamestart•  パンフレットでも紹介
  • 37. ongamestart•  ほかにも Canvas based の 3Dゲームエンジン「Origami 3D」など•  詳しくは http://wise9.jp/ にレポートを掲載してますよ!
  • 38. ongamestartHTML5 GameConference DevCon5 etc...
  • 39. what is enchant.js ?Webや携帯で遊べるゲームといえば …Flash & Flash Lite?
  • 40. what is enchant.js ? Flash Lite には 配列がないらしい (伝聞)
  • 41. what is enchant.js ? 今はNo more Flash そもそもiPhoneでは動かないし
  • 42. what is enchant.js ?じゃあ、enchant.js ならゲームが どんなゲームが作れるの?
  • 43. what is enchant.js ? see 9leap
  • 44. what is enchant.js ?じゃあ、enchant.js ならゲームが どんなカンタンに書けるのか?
  • 45. what is enchant.js ? (Live Coding)
  • 46. what is enchant.js ?帰ってすぐ書ける!プログラミング講座
  • 47. 前提•  テキストエディタで編集
  • 48. 前提•  JavaScriptのファイルを、 テキストエディタで編集 → 保存
  • 49. 前提•  そのJavaScriptを読み込むように指定した HTMLを、Safariで実行
  • 50. 前提•  ウインドウ開きっぱなしでいったりきたりする
  • 51. デバッグ スパナのマーク
  • 52. デバッグ
  • 53. デバッグ 「JavaScriptコンソール」をオンにする
  • 54. 前提 → main.js の 15行目でエラー
  • 55. 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); } });
  • 56. what is enchant.js ? 詳細なリファレンスは公式サイトのDocumentsから
  • 57. what is enchant.js ?公式サイトで画像素材も提供しています
  • 58. 9leap•  どこでも遊べるゲーム投稿サイト•  若いプログラマーの育成と発掘を目的と したコンテスト
  • 59. 9leap
  • 60. 9leap•  ログイン•  「投稿・編集画面」から「新規投稿」
  • 61. 9leap•  いろんなコンテストも実施中•  メインコンテスト (後期 ∼12月31日) –  25歳以下の学生対象です –  MacBook Air or Pro 5名 –  通年の最優秀賞3人にはGDC & シリコンバレーツアー
  • 62. 9leap•  9Days Challenge –  誰でも応募できる –  月初め or 15日から9日間の開催 –  現在は「ピアプロチャレンジ」…日曜日まで!!
  • 63. 今後の展開•  雑誌連載中です –  週刊アスキー •  「9leap高校ゲーム開発部」 –  月刊BestGear –  トランジスタ技術Jr. •  「100行で挑戦!ゲームプログラミング道場」•  書籍も発売予定 …? (まだヒミツ
  • 64. enchant.js•  enchant.js はまだまだ発展途上 (v0.4.1)•  機能の追加も予定されています•  こんな機能が欲しい! という要望は github の issues へ•  こんな機能を作ったから組み込んでくれ! という要望は githubの pull request からどうぞ
  • 65. ご静聴ありがとうございました!
  • 66. タイムテーブル•  ショートセッション×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 懇親会会場に移動