WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

Canvasで3Dフライトシミュに挑戦

      2009/11/10

Canvasを使って、前に作ったフライトシミュを書き換えてみました。 ⇒Canvasによるフライトシミュレーション(IEでは動作が遅くなります) CanvasはHTML5で策定されたJavaScriptのグラフィック描画機能です。しかし、ブラウザによって動作がまちまちで、特にIEでは予想以上に重くなってしまいました。ただ、今回試したChromeでは快適に動作。私の環境ではSafariは確認できませんが、Chromeで動くのでおそらく大丈夫? なお、Firefoxはちゃんと動くものの、途中で一時的に動作が止まることがあります。その他、Canvasを使ってみて、少々不便と思ったことを挙げてみました。 1、z-indexのようなプロパティがないこと。一応、globalCompositeOperationプロパティで、新しい図形を以前に描画された図形の前面にするか、背後にするかといった選択はできるが、数値でわかりやすく「手前-奥」の前後関係を設定することができない。しかも、IEではexplorerCanvasが対応していないので、手前に星があっても奥の星が普通に表示されてしまう。 フライトシミュの例でいうと、奥にある星が手前の星の裏側に隠れるようにしなければならないが、今回は画面の125個の星を、Prototype.jsのsortBy()を使って手前から近い順にソートし直している。sortBy()を使うと、(引数として渡した)関数内で戻り値とした数値に応じて並べ替えを行ってくれる。
	 
	var sortNum = [10, 8, 15, 4, 0, 7].sortBy(function(value) { return value; };
	// sortNum ⇒ [0, 4, 7, 8, 10, 15] 数値の小さい順に並び替えられた。
	 
	var sortStr = ['aaaaa', 'bbb', 'cccc'].sortBy(function(value) { return value.length; };
	// sortStr ⇒ ['bbb', 'cccc', 'aaaaa'] 文字数の少ない順に並び替えられた。
	 
2、しょうがないとはいいつつも、IE用のexplorerCanvasがかなり遅いこと(JavaScriptの処理速度が遅すぎるのが原因かも。処理スピードがChromeの1/24ではいくらなんでも)。 3、描画した図形にアニメーションをつけるに、一度画面をクリアして再描画する必要がある。私はグラフィックのことをよく知らず、図形をオブジェクトのように動かせると期待していたので、このあたりの書き換えは苦労しました。 4、画像を使用する場合、前提として画像の読み込みが終了していなければならないこと。次のように画像のonloadハンドラを使う方法があります。
	 
	var img = new Image();
	img.onload = function() {
		// ここに画像表示の処理を入れる
	};
	img.src = 'image01.png';
	 
ただ、これだと一つの画像しか処理できない欠点があります。JavaScript Image Preloaderのスクリプトを追加することで、複数の画像の読み込み終了を追跡することができます。コードは下記の通り比較的短いものです。
クリックするとコードが表示されます(JavaScript使用)
このスクリプトの使用法はいたってシンプルで、new Image()で作成した各オブジェクトを[](大かっこ)で囲むなどして、ImagePreloaderの第一引数に配列として渡すだけです。
	 
	var img01 = new Image();
	var img02 = new Image();
	var img03 = new Image();
	new ImagePreloader([img01, img02, img03], function() { // 第一引数に配列として各オブジェクトを渡す
		// ここにdrawImage()メソッドなどの画像表示処理を入れる
	};
	img01.src = 'image01.png?' + new Date().getTime(); // 「?」以下はIEでキャッシュ済みと認識されないためのハック
	img02.src = 'image02.png?' + new Date().getTime();
	img03.src = 'image03.png?' + new Date().getTime();
	 

 - JavaScript/Ajax, ゲーム , ,