Tag Archives: enchant.js

enchant.jsを理解して、Labelの中央そろえを実現!

0
Filed under JavaScript
Tagged as , ,

enchant.jsでLabelというクラスがあるのですが、他のGUIライブラリのように、プロパティやメソッドは揃っていません。
例えば、センタリングやフォントサイズの指定とかそういうのはないのです。

しかし、enchant.jsは、HTMLのDOMを操作するライブラリである、ということを理解しておくと、普通HTMLでできることは大体なんでもできます。
今回調べたのは、Labelで作ったものを中央そろえにしたい、ということですが、それを実現するために、まずはその前に、enchant.jsのソースを覗いてみましょう。

enchant.jsの基本構造:Entity

Labelクラスですが、次のような構造になっていることが分かります。

enchant.EventTarget
 ↑
enchant.Node
 ↑
enchant.Entity
 ↑
enchant.Label

で、ポイントは、enchant.Entityクラス。
ドキュメントにも『DOM上で表示する実体を持ったクラス.』と書かれていますが、実際enchant.js内を見ると次のようになっています。

1
2
3
4
5
6
7
8
9
10
11
12
enchant.Entity = enchant.Class.create(enchant.Node, {
    /**
     * A class with objects displayed on DOM. Not used directly.
     * @constructs
     * @extends enchant.Node
     */
    initialize: function() {
        enchant.Node.call(this);
 
        this._element = document.createElement('div');
        this._style = this._element.style;
        this._style.position = 'absolute';

ありました!
ポイントは、この this._element ですね!
つまり、誤解を恐れずに言えば、enchant.jsとは、div要素をabsolute(絶対位置)に配置し管理しているライブラリなのです!
その下に、styleとかも見えるので、自由に触れそうな感じがします。
ということで、今回の目的を達成するために、これをいじってみましょう。

Labelの中央そろえ

JavaScriptでは、DOM要素に、style.textAlignを設定できるはずなので、設定してみましょう。
そのテストコードを、jsdo.itに投稿してみました。

How to center text of Label – jsdo.it – share JavaScript, HTML5 and CSS

ポイントは、次の1行です。

1
labelTest._element.style.textAlign = 'center';

これでもいいですが↓

1
labelTest._style.textAlign = 'center';

問題なく設定できていますね!
ただ、内部変数を直接いじっていることになるので、今後のバージョンアップとかで使えなくなる可能性があるのは注意しておく必要があります。


[AD]

↓売れまくっているらしい!

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

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

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

定価:

Amazon価格:¥ 3,240

大型本 ( 272 ページ )

ISBN-10 : 4048862588

ISBN-13 : 9784048862585


↓その場しのぎの積み重ね学習を繰り返してきたJavaScriptも基礎からやってみたいなぁ。

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで

著者/訳者:山田 祥寛

出版社:技術評論社( 2010-11-27 )

定価:

Amazon価格:¥ 14,993

大型本 ( 424 ページ )

ISBN-10 : 4774144665

ISBN-13 : 9784774144665


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

0
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 )

定価:

Amazon価格:¥ 3,240

大型本 ( 272 ページ )

ISBN-10 : 4048862588

ISBN-13 : 9784048862585



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


[AD]

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

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

著者/訳者:Julie Steele Noah Iliinsky

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

定価:

Amazon価格:¥ 4,104

大型本 ( 400 ページ )

ISBN-10 : 4873115043

ISBN-13 : 9784873115047