ゲームの画面幅を変更して画像とメッセージを表示する：Almightに触れる
前回、Almightのチュートリアルをさらーっと流し読みをしただけなので、今回は実際に触っていこうと思います。
Almightの使い方は、吉里吉里と大体同じなので、なんとかなるでしょう。恐らく。
画像はフリーの素材を使わせてもらいます。
びたちー素材感 URL http://www.vita-chi.net/sozai1.htm
ゆんフリー者新素材集 URL http://www.yunphoto.net
さて、まずは初期設定の画面サイズが 幅1024px 高さ768px と少し大きめなので 幅800px 高さ600px ぐらいに変更してみます。
configフォルダ内のalmight.config.jsをエディターで開きます。
中身の上部に
** * **ゲーム画面横幅** * * ゲームの画面の横幅をpxで指定します * * @property width * @type Number * @default 800 */ width: 1024, /** * **ゲーム画面縦幅** * * ゲームの画面の縦幅をpxで指定します * * @property width * @type Number * @default 800 */ height: 768,
という部分があるので width:800, height: 600, とします。
これで画面サイズを変更できました。
次はテキストを表示させようと思います。
試しに「テスト！」というテキストを表示させてみます。
今度は、ksというフォルダ内にあるfirst.ksを開きます。
中には
@call storage="macro.ks" Almightへようこそ！[m] どんなゲームを作りますか？ @s
とあるので、これを書き換えます。
@call storage="macro.ks" 「テスト！」 @s
うまくできました。
次は画像を表示してみます。
折角Almightを使うので、吉里吉里にはないAlmightのタグを使わせてもらいましょう。
@show_bg file=" " @action
を使ってみます。
背景に使う画像ファイルに test01.jpg という適当な名前を付けて jpgというフォルダに入れておきます。
そしてfirst.ksに以下ののように書き加えます。
@call storage="macro.ks" @show_bg file="test01.jpg" @action 「テスト！」 @s
無事に読み込まれました。
しかし、画像が読み込まれたことでメッセージレイヤーの表示がおかしいことが判明しました。
ゲーム画面のサイズを変更したためにメッセージレイヤーの初期サイズも変更しなければなりません。
ゲーム画面のサイズを変更したときと同じように almight.config.js を開きます。
そして以下の部分を変更します。
* **メッセージレイヤーの初期位置** * * メッセージレイヤーの初期位置とサイズをpx単位で指定します。 * すべてpositionタグのLeft, Top, Width, Heightに対応します。 * * @property messageLeft * @property messageTop¥ * @property messageWidth * @property messageHeight * @type Number */ messageLeft: 30, messageTop: 30, messageWidth: 960, messageHeight: 710,
この messageWidth: 960, と messageHeight: 710,がそれぞれメッセージレイヤーの幅と高さに相当します。
幅と高さは、なんとなく適当に
messageWidth: 740, と messageHeight: 550, としておきます。別に決まりはないですしね。
んー、しかし個人的にこのタイプのメッセージレイヤーは好きではないので下部だけに表示するようにしてみます。
@type_msg type="fullまたはadv" @action
というものがったので、これを使わせてもらいます。
type の部分に full とすると全画面に表示されるタイプのメッセージレイヤーになり adv とすると下部に表示されるようになるようです。
やってみましょう。
@call storage="macro.ks" @type_msg type="adv" @action @show_bg file="test01.jpg" @action 「テスト！」 @s
これは、確かに下部ではありますけども、さすがに下過ぎますね。
ゲーム画面サイズを変更したせいですね。これなら変えない方が楽でした笑
今度は [show_bg] のタグの中身を調整します。
ksフォルダの中の macro.ks を開きます。
すると以下の部分があるのでそこを書き換えます。
// メッセージレイヤーのタイプを変更する
// [type_msg type="fullまたはadv"]
//
// typeにfullを指定すると、サウンドノベル風に全画面にメッセージレイヤーが表示されるタイプになります
// typeにadvを指定すると、アドベンチャーゲーム風にテキスト枠が表示されるタイプになります
// 変更した後は、[action]を使って実行して下さい
[macro name="type_msg"]
[if exp="mp.type == 'full'"]
[current page="back"]
[deffont bold=true color="#ffffff" size=24][resetfont][current page="fore"]
[cm]
[position layer="message0" page="back" visible=true color="#000000" opacity=100 top=0 left=0 width=1024 height=768 marginl=150 margint=40 marginr=150 marginb=40]
[endif]
[if exp="mp.type == 'adv'"]
[current page="back"]
[deffont bold=true color="#ffffff" size=24][resetfont][current page="fore"]
[cm]
[position layer="message0" page="back" visible=true color="#000000" opacity=100 top=530 left=0 width=1024 height=238 marginl=160 margint=30 marginr=160 marginb=30]
[endif]
[endmacro]
[if exp="mp.type == 'adv'"] と [endif] の間にある記述が type に adv を指定したときの設定なので、この部分の
[position layer="message0" page="back" visible=true color="#000000" opacity=100 top=530 left=0 width=1024 height=238 marginl=160 margint=30 marginr=160 marginb=30]
を変更します。
メッセージの位置が低すぎたので top=530の部分を top=450 ぐらいにしてみます。
ようやくそれらしいメッセージ画面になりました。
今回はゲーム画面を変更しましたが、本当は初期設定の画面サイズで作る方がよいとは思います。
HTML5を使用しているだけあってブラウザを縮小すればその分小さく表示されるので、元々小さく作るよりは大きめに作った方がよいと思います。
今回はその画面サイズに合わせた画像をそろえていなかったので、画面サイズを変更しただけですので。。。
実際、上記したような手間になるので初期設定から変更しない方がやりやすいと思われます。。。
