• Showing Page History #59790

HTML5 Game Dev Wiki


概要

HTML5 の Canvas と Java Script を利用してゲームを作成します。

  • 基本的な開発予定
    1. 簡単なFPSゲームを作成
    2. ゲームプログラムの基本構造を固める
    3. 別ジャンルのゲームを作成

ゲーム開発を進めながら HTML5 によるゲーム開発のノウハウを整理していく予定です。


Google ガジェット(OpenSocial) 対応

開発中のゲームは Google ガジェット(OpenSocial) としても動作します。
iGoogle の画面から以下の XML を指定して追加します。
(Firefox 3.6.6 で動作確認)

KioMiku Player http://cnut256.appspot.com/gadgets/kmp.xml
wPhone http://cnut256.appspot.com/gadgets/wphone.xml
JS FPS http://cnut256.appspot.com/jsfps/gadget.xml
Mini Games http://cnut256.appspot.com/minigames/gadget.xml

(フォーカスの関係で表示直後はキーボードが利かない状態ですが、ゲーム画面をクリックするとキーボード入力が有効になります。)

ウェブページに埋め込むことも可能です。
以下のコードをウェブページの HTML に埋め込みます。
(Firefox 3.6.6 で動作確認)

  • KioMiku Player (埋込例: http://h5gamedev.sourceforge.jp/?Welcome:KioMiku_Player )
    <script src="http://www.gmodules.com/ig/ifr?url=http://cnut256.appspot.com/gadgets/kmp.xml&amp;synd=open&amp;w=340&amp;h=350&amp;title=KioMiku+Player&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
    
  • wPhone (埋込例: http://h5gamedev.sourceforge.jp/?Welcome:wPhone )
    <script src="http://www.gmodules.com/ig/ifr?url=http://cnut256.appspot.com/gadgets/wphone.xml&amp;synd=open&amp;w=220&amp;h=420&amp;title=wPhone&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
    
  • JS FPS (埋込例: http://h5gamedev.sourceforge.jp/?Welcome:JS_FPS )
    <script src="http://www.gmodules.com/ig/ifr?url=http://cnut256.appspot.com/jsfps/gadget.xml&amp;synd=open&amp;w=430&amp;h=420&amp;title=JS+FPS&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
    
  • Mini Games (埋込例: http://h5gamedev.sourceforge.jp/?Welcome:Mini_Games )
    <script src="http://www.gmodules.com/ig/ifr?url=http://cnut256.appspot.com/minigames/gadget.xml&amp;synd=open&amp;w=530&amp;h=460&amp;title=Mini+Games&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
    


オンラインゲーム・モード

JS FPS はオンラインゲームとしても動作可能です。
(サーバモジュールをデプロイ済みの Google App Engine のサイトから実行した場合)
ゲームのメニュー画面で「JSFPS Online」を選択するとオンラインゲーム・モードになります。
オンラインゲーム・モードではニコニコ動画風のチャット機能があります。

以下の URL のアプリはオンラインゲーム・モードで動作します。


サーバ上に配置済みのアプリ

動作確認用です。


解説ページ

wiki:TestPage



参考サイト

Akihabara http://www.kesiev.com/akihabara/
Aves Engine http://www.dextrose.com/en/projects/aves-engine
Ben Joffe http://www.benjoffe.com/code/
JavaScript Adventures http://www.mrspeaker.net/javascript/
HTML5 Canvas Cheat Sheet http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

素材サイト

しゅがーぽっと http://www.icnet.ne.jp/~sugarpot/index.html
仮設サイト http://www.geocities.jp/bhmqm120/material.htm
スキマノソザイ http://wato5576.hp.infoseek.co.jp/index.html
stockvault http://www.stockvault.net/
01SoundEarth http://www.01earth.net/sound/
ULTIMATEゲーム事業部 http://utm-game-web.hp.infoseek.co.jp/free-sound.htm
Witch Craft http://witchcraft-jp.sakura.ne.jp/index.html
MikuMikuDance http://www.geocities.jp/higuchuu4/
Xiao Sphere http://xiao-sphere.net/
ぽりぽりぽり http://ameblo.jp/pandacocoa/
ガチムチ素材集 http://www10.atwiki.jp/herrington/
ニダーRPG人民共和国 http://nida.vs.land.to/
TAM Music Factory http://www.tam-music.com/index.html
キオ式アニキャラ3D http://kiomodel3.sblo.jp/


Latest File Release

etc (gadgets-alpha-20100830)2010-08-30 05:53
h5gamedev (sgskel-alpha-20100908)2010-09-08 16:35

Recent Tickets

(empty)