enchant.jsでメッセージの表示をしてみる

enchantjs講座

今回はenchant.jsでのメッセージの表示のさせ方を紹介します。

enchant.jsではLabelというクラスを使って文字を表示できるんですが、実はちょっとした問題があって、自動で改行させると文字が大きい場合重なってしまいます(訂正:どうやらこれは私の勘違いだったらしい(^^;))。

なのでその問題も解決しつつ、RPGやアドベンチャーゲームとかである「1文字ずつ表示しつつ画面押したら一括表示する」やつを作ってみました。

↑こんなやつ。GIFのフレームレートが低かったので数文字ごとに出ているように見えますがプログラムはちゃんと1文字ずつ表示します。

今回のプログラムでは画面のどこでも好きな場所にメッセージを表示できるように作りました。うまくやれば吹き出しのようにして出すこともできるかもね(‘ω’)ノ

使い方・内容説明

今回はGroupを継承してクラスを作りました。で、クラスを作る際に文字の大きさと文字を表示する場所の幅と高さを指定します。それをもとに計算して一行に表示する文字の数と行数を出してます。

このプログラムでは文字の大きさと表示域の幅から計算された文字数で改行を行います。それと「/(半角スラッシュ)」を改行文字として扱っています。表示したい文字列の改行したい部分に入れてください。

あと、全角専用です。半角文字を使うと文字の幅が違うので一行の長さに差が出てしまうので全角文字だけ使用してください。

プログラムの内容としてはjavascriptのsubstr()メソッドを使って一文字ずつ取得して、一行の限界文字数またはスラッシュで改行し、表示行の最大数まで来たら画面クリックを促す▶を点滅表示させます。クリックされたら表示に使っていた変数たちを初期化して続きを表示させます。

printメソッドをメインループの内に書き込むと動きます。

あとがき

うん、まぁやりたいことはできたなって感じかな(^^;)がんばればもうちょっときれいに書けるかなぁ。。

それにまだ実際にゲーム内で使ってないんだよね。とりあえず作ってみただけって言うね( ̄∇ ̄;)ハッハッハ

出来る方はお好きに改造して使ってくだされ(‘ω’)ノ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です