Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5でギャルゲーを作れるか?

19,689 views

Published on

第2回Hakodate.* LT1本目。

補足:シナリオファイル案 http://gist.github.com/429601

  • Be the first to comment

HTML5でギャルゲーを作れるか?

  1. 1. HTML5でギャルゲーを作れる か?
  2. 2. HTML5でできること  いままでのAjax/JavaScriptでできること全部  XmlHttpRequest  DOM  JSON  CSS  DynamicHTML  Canvasタグ  Audioタグ  Videoタグ これだけあればギャルゲーつくれんじゃね?
  3. 3. 目標はとりあえずこんな感じ
  4. 4. 先駆者  Ajaxとギャルゲーやエロゲでぐぐれば出てくる。  HTML5が出てくる前からあるアイデア。
  5. 5. ゲーム画面  旧来のDOM・CSSを用いる方法  Idを割り振り、それに背景画像をつける。  DOMでガリガリいじる。  IEでも動く!  けどIE6は透過PNG対応してないので爆発しろ!  Canvasを用いる方法  Canvasに画像を貼り付ける。  HTML5対応ブラウザじゃないと無理。
  6. 6. レイヤーの考え方  CSSで重ねて透過PNGを置けばいい。  JavaScriptで管理しやすいのでコッチのほうが楽?
  7. 7. 音楽(BGM・ボイス)  Audioタグを使う  ブラウザによって対応がまちまち  MP3はFirefoxではつかえない。  OggはSafariではつかえない。  いったいどっちを使えばいいの!!  両方用意する。  ついでにIE非対応だし。  iPhoneでは、Audioタグもまともに使えない。
  8. 8. オープニング・エンディング  Movieタグ  ぐだぐだの対応。  音楽と同じことが起こってる。  もう言わなくても分かると思うので省略。  Canvasタグ・DOM・CSS・JavaScript  JavaScriptでムービー作るとかぶっちゃけありえない。め んどくさい。
  9. 9. シナリオファイル  XMLで作る  他のシナリオ形式に比べて書きにくい  ファイルが長い  XmlHttpRequestでそのまま読めるメリット  その他形式案  他のソフトのシナリオ形式と互換  JSON → それならXMLでよくね?  コンバータ → 書くのメンドイ。
  10. 10. セーブデータ  普通にAjaxでサーバに送信する方法  今まで使われてたのとほぼ同じ方法。  PHPとかで簡単にできる。  LocalStorageを使う方法  セーブデータをローカル保存できる。  ついでにデータのキャッシュもここに置くと読み込みが早 くなる。  でも、せっかくWeb化した意味が薄い。  上記と組み合わせてやると効果的。
  11. 11. 難読化  画像の難読化 → DataURIを用いる方法  JSONやPHPなどを用いて圧縮や暗号化をかけてデータを 配信  JavaScriptを用いてデコードし、DataURIとして展開。  JavaScriptの難読化  たくさんあるので省略  ほかの難読化  DataURIでどこまでできるか不明。
  12. 12. 結論  IEを無視すれば既存のAjaxライブラリとかを使えばでき る気がする。  でも、作るの時間かかるなぁと思いつつ。  それよりシナリオやイラストが無いけどね!w

×