Tweet

Pocket

前回は簡単でしたがHerlock.の開発画面について書いてみました。
「Javascriptで作るスマフォアプリ！Herlock.を使ってみた！！」
今回から数回に分けてチュートリアルを元にコードを読んでみたいと思います。

Index

• サンプルコード
• Herlock.のレイヤーの仕組み
• 課題点
• まとめ

サンプルコード

テキストを表示する

var stage = new Stage( 640, 640 );
addLayer( new Layer( stage ) );

var textField = new TextField();
textField.defaultTextFormat = new TextFormat( null, 20 );
textField.text = "テキスト";
stage.addChild( textField );

表示結果

※画面右側にある矢印のような出っ張りは、ここをつかんで引っ張るとデバッグ用画面が表示されます。

コードなにやらLayerやらStageやらTextFormatなど使っている様子。
これらは何を意味しているのかマニュアルで確認

Herlock.のレイヤーの仕組み

Herlock.マニュアル「Layerって何？」より

図からみて分かるように、まず「main.js」ファイル自体はWindowクラスになります。
Window上に直接テキストなどの要素を置くのではなく、LayerクラスをWindow上に設置します。
Layerはコンテナーの役割をして、その中に必要な要素を配置していきます。

ここまで来てお気づきかもしれませんが、Herlock.はMonacaのようにHTMLベースで画面レイアウトを作成して、JSで表示を制御する形式ではなく、レイアウトもすべてコードで記述する必要があります。
また、サンプルコードではStageクラス上にTextFieldを配置していますが、これも以下のように座標をしていする必要があります。

var obj = new TextField();
obj.x = 100;
obj.y = 100;
obj.text = "hoge":
stage.addChild(obj);

課題点

Layerに配置したStageなどの要素は「Layer.scaleMode」プロパティや「Layer.verticalAlign」プロパティなどで表示サイズや位置をデバイスに合わせる場合があります。

Layer.scaleMode

Herlock.マニュアル「Layerって何？」より

“exactFit” ・・・ アスペクト比を無視しスクリーン全面に描画
“noBorder” ・・・ アスペクト比を維持したままスクリーン全体に描画。コンテンツがスクリーンからはみ出す。
“noScale” ・・・ 拡大縮小なし。実装として端末差異を吸収する事になる。
“showAll” ・・・ アスペクト比を維持しコンテンツ全体がスクリーンに収まるように描画。スクリーンが余る。

Layer.verticalAlign / Layer.horizontalAlign

Herlock.マニュアル「Layerって何？」より

水平揃え Layer.horizontalAlign

“left” ・・・ 左寄せ Layer.HALIGN_LEFT
“center” ・・・ 中央寄せ Layer.HALIGN_CENTER
“right” ・・・ 右寄せ Layer.HALIGN_RIGHT
垂直揃え Layer.verticalAlign

“top” ・・・ 上寄せ Layer.VALIGN_TOP
“middle” ・・・ 中央寄せ Layer.VALIGN_MIDDLE
“bottom” ・・・ 下寄せ Layer.VALIGN_BOTTOM

これがなかなかの曲者で、デバイスの向きをかえたりすると、横幅に対して短かったり、長すぎて切れたりしてしまいます。
scaseModeに対して”showAll”を設定してアスペクト比を維持して、デバイスによって発生する余白は目をつぶるしかないのかな～？
何がよいレイアウト定義なのかまだ判断出来ないので、試行錯誤しながら調べていきたいと思います。

まとめ

レイアウトの考え方はどちらかというとゲーム開発を目的とした「libGDX」に似ていますね。
ただ、Layerという概念を利用して、デバイスの解像度を吸収したり、画像の重なりを制御したりと、いろいろな事は出来るようです。
とは言っても、MonacaやAndroidのネイティブアプリのようにレイアウトをサクッと作るイメージではないので、簡単にアプリが作れるか？と考えると、この先も苦戦しそうです。
他のチュートリアルもいじりながらこの辺を習得していってみたいと思います。

関連記事 :

Javascriptで作るスマフォアプリ！Herlock.を使ってみた！！