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

3,719 views

Published on

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,719
On SlideShare
0
From Embeds
0
Number of Embeds
1,848
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

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

×