enchant.js
たとえば、マップチップのテクスチャ画像を使って背景を塗りつぶすような場合にはSurfaceを使う。Surfaceのdrawメソッドでテクスチャ画像の一部を描画して、そのSurfaceをSpriteのimageにすれば良い。 たとえば、マップチップ一つのサイズが16x16で320x320の…
昨日の日記でアセットのパスの入力が長くて大変ということについて、コメントで解決方法を教えてもらった。ありがとうございます。 その方法はアセットのパス名を別名で定義してしまうこと。 たとえば、キャラとマップのグラフィック素材があったとき、次の…
ここでいうアセットは画像や音楽の素材のこと。 enchant.jsでアセットを扱うにはまずGameオブジェクトのpreload()メソッドを使って読み込む。引数には素材のパスを指定し、複数ある場合は,で区切る。 game.preload('http://enchantjs.com/assets/images/char…
code.9leap.netにはチュートリアルを作れる面白い機能がある。そしてこのチュートリアルのコンテストが行われている。 wise9 › code.9leapで自作チュートリアルを作ろう!そしてRetina Macが当たるチュートリアルコンテストのお知らせ! 面白そうなので自分も…
code.9leap.net ブラウザ上でenchant.jsが実行できるサイト。いわばjsdo.itのenchant.js版。 jsdo.itでenchant.jsを使うにはライブラリを追加したりとちょっとした準備が必要。それでもライブラリファイルをコピーしたりするよりは断然楽なのだけれども、cod…
サーフェイスは画像や図形の情報を保持する画像データ。サーフェイスはcontextプロパティを持っており、これはHTML5のCanvasのcontextをラップしたもの。HTML5のCanvasのcontextと同じグラフィックス描画命令を使用できる。 リファレンスはこちら。 Canvasリ…
enchant.jsでスプライトを使ってキャラクターを動かすサンプルコードを入力して試そうとしたところ、まったく画面にキャラクターが出ない。もちろん、コードが間違っているのだろうと、いつものようにDeveloper Toolsを開いて、Consoleに出力されているであ…
描画オブジェクトの位置を指定するにはxプロパティとyプロパティに座標を指定する。このxとyのプロパティはNodeオブジェクトのプロパティで、描画オブジェクトはNodeオブジェクトを継承しているので利用出来る。 メソッドとして、moveTo(x,y)とmoveBy(x,y)を…
enchant.jsでの色指定の方法はCSSのcolorプロパティと同じ形式。 書式は次の6とおり。 書式 例 #RGB "#f00" #RRGGBB "#ff0000" rgb(R,G,B) "rgb(255,0,0)" rgb(R,G,B) "rgb(100%,0%,0%)" rgba(R,G,B,A) "rgba(255,0,0,1.0)" 色の名前 "red" RGBの割合を%で指…
9leap : トップページ - どこでも遊べる、投稿型ゲームサイト 9leapへの投稿をテスト。投稿したのはただのテストプログラムなので、もちろん非公開に設定。 jsdo.itからの投稿は非常に簡単。 まずは9leapにログインしておく。自分はtwitterのアカウントでロ…
wise9 › avatar.enchant.jsが登場!2000万通りの中から君だけのキャラが作れる!? enchant.jsにグラフィック素材として使えるアバターシステムがリリースされた。 キャラクターの絵が無くても四角や丸だけでもゲームを作ることは出来る。でもそれだと画面が寂…
週刊アスキーに載っていたゲームのサンプルコードを実際にjsdo.itで試してみた。 forked: 2012-02-10 6th - jsdo.it - Share JavaScript, HTML5 and CSS これが結構大変だった。まず誌面1ページにコードを載せるために記述が見にくくなっている部分があって…
ドットインストールのレッスンではenchant.jsでの音の鳴らし方が無かったので、enchant.jsのサンプルコードを見てどのようにして鳴らすか調べてみた。基本的な再生方法は次のとおり。 game.preload('se.wav'); game.onload = function() { game.assets['se.w…
Let’s start enchant.js | enchant.js - A simple JavaScript framework for creating games and apps. enchant.jsの機能を調べるためにReferenceを見ていたところ、サンプルコードの下に「サンプル」というリンクがあるのに気がついた。そのサンプルが実行…
Sceneはスタック状に管理されており、pushSceneとpopSceneでシーンの追加や終了が出来る。 が、ちょっと試していたところ、ときどき元のシーンに戻れないことがある。多分どこかの処理が間違っていて余分にpushSceneしてしまっているのだろうけど。今登録さ…
スプライト同士の当たり判定にはintersectメソッドかwithinメソッドを使う。 intersectメソッドはスプライト領域が重なっているかで判定されるので、テクスチャで書かれたキャラクターのまわりが半透明でもその部分が重なっても当たったと判定される。 withi…
今まで試していたのを新バージョンに入れ替えてテスト。前のと変わらず動作した。 試しにデバッグモードでの実行を試してみた。デバッグモードにするにはgame.start()をgame.debug()に変えれば良い。当たり判定や要素の大きさが表示されて分かりやすい。 jsd…
wise9 › デバッグ機能が強化された enchant.js v0.4.3 リリース! enchant.jsの新しいバージョンがリリース。こんどはデバッグ機能が強化されている。当たり判定をリアルタイムで表示することができるらしい。これは便利そうだ。 ブラウザ上で動いているので…
