カテゴリー:Canvas関連

リスト表示へ

HTML5でスマホをコントローラにするゲームを作ってみた

2011年10月27日 09:00

Canvasゲームをカスタマイズ

ゲーム自体は以前作ったものをそのまま使いました。

今回作ったスマホコントローラ版

http://edo-m18.me:9000/

以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。
これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`)
ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。

Node.jsを使って実装

今回、WebSocket部分はNode.jsを使って実装しました。
最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんw
やはりサーバサイドとクライアントサイドが同じ言語、というのはとても実装しやすいですね。Node.jsおすすめです。
ちなみに最近、Node.js関連については別ブログで記事を書いてます。まだ全然記事数が少ないですが、興味がある方はぜひ。→ EBLOG Branch

機能説明

簡単に機能を説明すると、Node.jsのSocket.IOモジュールを使ってWebSocketを使えるようにします。
その後、Socket.IOのversion0.7? から追加されたnamespaceを使ってPCで見ている画面とスマホ画面を結びつけます。

最初にPCでアクセスするとスマホでアクセスするためのID入力が求められるので適当なアルファベットでIDを入力します。
するとそのIDを元にスマホでアクセスするURLが表示されるので、そのURLにスマホでアクセスします。

すると画面には「tab to shoot!」という文字しか出ませんが、タップで弾を発射、加速度センサーで自機の移動ができるようになります。
横向きに持ち、左右に傾けることで自機を動かすことができるようになっています。

若干タイムラグが発生しますが、ゲーム画面のコントローラとしてスマホを使うのは面白なーと思って作ってみました。
※まだ全然調整していないので、Androidでは動いてません。現状はiOSオンリーです。

Canvasを使ってシューティングゲームを作ってみた

2011年1月 9日 14:47

Canvasって面白いね!

なかなか更新できてなくてしょんぼりな近頃ですが、なんでだかゲームプログラミングが最近楽しすぎて色々勉強してますw
そして Canvas の使い方が段々分かってきた感じです。

Canvas、めちゃんこ楽しいです。ある程度タイムライン的な動かし方のコツを掴んだらなんでもできそうに錯覚しますね。
ってことで、お正月三が日は jsdo.it 上で色々やってましたw

今勉強がてら作ったゲームが↓のものです。(※音が出るので注意)
コードの下のほうにある「play」ボタンを押すと再生されます。

※ローディング部分の作りが甘いので、たまに隕石が破壊できないとか音が鳴らないとかバグがあるので、そうなったら再読込してください・・。

forked from: Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

作ってみて学んだこと

canvas の使い方がなんとなく見えてきた、ということ。
静的な画像であればそれほど問題ないですが、アニメーションの場合は

  1. 各オブジェクトの描画
  2. canvasのクリア
  3. 各オブジェクトの次のフレーム位置の計算
  4. 各オブジェクトの描画
  5. ...以下繰り返し

という、かなりめんどくさい処理をする必要があります。
しかし、今回の制作を通して学んだコツとしてはフレームを描画する関数を作り、その中にさらに各オブジェクトを描画する関数を入れて、それぞれのオブジェクトを描画する関数を定義する、ということです。
そして、FPS にしたがって連続的にフレームを描画する関数(サンプルでは updateFrame 関数)を実行することでアニメーションが作成できます。

canvasはスマートフォンにも応用できるし、JS で画像のロールオーバーなんかを実装するのであれば、いっそ canvas でやってしまう、というのも面白いかもしれません。

1