enchant.jsのステージサイズについての基礎知識

Filed under JavaScript
Tagged as , , ,

enchant.jsを使い始めているのですが、その基礎部分についてちょっと調べてみたメモです。

enchant.jsとは

本家サイトより引用。

enchant.js は HTML5 + JavaScript ベースのゲームエンジンです。わずか30KBのソースコードで、PC, Mac, iPhone, iPad, Android すべてで動作する クロスプラットフォームなアプリケーションを開発可能なスタンドアロンライブラリです。

ゲームに限らずあれこれ使えるので、既に色々調査を進めているところですが、ちょっと今日はその基礎部分が気になったので調べました。
enchant.jsのページ内の表示サイズについて、任意のサイズに収めたいと思って調べたのですが、あまりその辺りのドキュメントが見当たらなかったので、大したことではないのですが書いておきます。

HTMLとenchant.js

enchant.jsを使うとき、描画領域を指定するところは、実は2ヶ所あります。
enchant.jsのサンプルのように、HTML上に最大表示するものは、特に何も指定することはなく、それでもenchant.jsが内部的に適切なDOM要素を追加してくれますが、自分でここに使いたい!というときは、divタグを使う必要があります。

  <div id="enchant-stage"></div>

まずは、上記のように書くと、div#enchant-stage に、enchant.js内のGameインスタンス生成時に渡したサイズで描画されます。

  // @game.js
  game = new Game(320,320);

では、160×160の領域に、Game(320,320)で作ったenchant.jsの領域を埋め込みたい(1/2に縮小表示したい)ときは、どうしたらいいでしょうか?
enchant.jsのソースを調べた結果、次のコードで大丈夫と分かりました。

  <div id="enchant-stage" style="width:160px;height:160px;"></div>

まとめ

■概念図


(↑この図は先日のブログで紹介したiDrawで作りました!)

■等倍表示

<div id="enchant-stage" style="width:320px;height:320px;"></div>
// @XXX.js
game = new Game(320,320);

■1/2(縮小)表示

<div id="enchant-stage" style="width:160px;height:160px;"></div>
// @XXX.js
game = new Game(320,320);

Gameの方のサイズを変更すると、素材や各種座標も変更する必要があり、調整が大変なケースが多々あります。そういうときにも使えるテクニックですね。
まぁ、仕事で使おうとしたらそれぞれの案件でいろいろやりたい事があるわけで、そういうときに自由に解析して簡単に修正して商用にも使えるenchant.jsって超便利!と再認識した次第。
(enchant.js のライセンスは、MITライセンス / GPL2 のデュアルライセンスです)

オフィシャル本

最近、オフィシャル本が発売されたようですが、大人気のようですが、私はまだ必要に迫られていないのもあって入手していません。
こういうところも書かれていたりするのかな?

HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】

著者/訳者:布留川英一 伏見遼平 田中諒

出版社:KADOKAWA/アスキー・メディアワークス( 2012-02-18 )

定価:¥ 3,240

Amazon価格:¥ 3,240

大型本 ( 272 ページ )

ISBN-10 : 4048862588

ISBN-13 : 9784048862585



まぁ、今回の内容も、enchant.jsの中を追っかけていけば分かることだったりしましたし、書店で見かけたら中を確認して買おうかと思っています。


[AD]

↓beautifulなもの作りたいですね!

ビューティフルビジュアライゼーション (THEORY/IN/PRACTICE)

著者/訳者:Julie Steele Noah Iliinsky

出版社:オライリージャパン( 2011-10-26 )

定価:¥ 4,104

Amazon価格:¥ 4,104

大型本 ( 400 ページ )

ISBN-10 : 4873115043

ISBN-13 : 9784873115047


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)