ゲーム/アニメーションの入門に一番簡単なのはcanvasかも

javasript canvas

Canvasは、ブラウザ上に図を描くために策定されたHTML5の仕様です。制御にはjavascriptを用います。

www.benjoffe.com | Canvascape
このサンプルをみて、HTML+jsでここまでできるのか！と感動しました。しかもそんなに大きいコードじゃない。


というわけで、迷路の自動生成アルゴリズムを組んでゲームっぽいものを作ってました。　対応はたぶんFirefox safari chrome
http://magnetpress.net/test/laby.html

リロードで再生成。最終的にローグライクもしくはWizのような何かを作ってみる予定。Web ストレージの使用も視野に。
ソースはみないでください、で、javascriptの練習しながら作ったものなので酷いものです。あとでリファクタリングしたい。

扱い方

MDCに詳しい仕様が載っています
基本的な使いかた - MDC

ソースを読んで頂ければだいたいの雰囲気はわかると思います。javascript で canvas要素に対して図形を描いていきます。

  • サンプル 
<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

アニメーションの構成

ということで、アニメーションの最小構成を組んでみました。


main.html
=========

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Animation Test</title>
  <script type="text/javascript" src="anicv_chrome.js"></script>
</head>

<body>
  <canvas id="mainWindow" width="600" height="450"></canvas>
</body>
</html>

ゲーム的な構成にしている為、アニメーションを書くだけならキー入力、アップデートモジュールは複雑に分割しなくていいでしょう。
重い処理をやらせてくると、javascriptの実行速度がネックになってきます。firefoxは正直辛い感じ。safariやchromeはそこそこ。

3Dについて

将来的に3Dもサポートするそうです。
Firefox開発版でもWebGLの初期実装が完了 - Mozilla Flux

すでに動いていた。
WebGL Samples/Demos and other bits at Vladimir Vukićević


現在のAPIではOpenGLほどの複雑な処理はできないそうなのですが、canvasを使って実装された processing.js というのもあるそうです。processingのjavascript移植だそうで。次はこれをいじってみるかも。ただ、アニメーション処理させるには重いかもしれませんね。