LoginSignup
3
3

More than 5 years have passed since last update.

ビットマップフォントで遊ぶ:マップチップをフォント登録してRPG風画面を作ってみる

Last updated at Posted at 2016-05-07

結局やってみました。

フォントのA~Pにマップ画像を対応させる

スクリーンショット
(0と1の画像は気にしないでください。)

こちらの投稿でやったやつです。あらかじめフォントデータは用意しておらず、アトラス画像パーツからその場でフォントへ変換しているのがポイントです。
テクスチャアトラスをビットマップフォントへ動的に変換する

マップデータを作る

sample.as
// マップデータ
var mapText:String = [
    "CCCCIIIIIIIIAAAA",
    "CCCIIIIIIAAAAMAA",
    "CCCCIIIAAAAAAAAA",
    "CCIIIAAAAOAAAAOA",
    "CCIIIIAAAAAAAAAA",
    "CCCIIIIAAAAAAAAA",
    "CCCCCIIAAAAOAAAA",
    "CCCCCCCIIAAAAAOA",
    "CCCCCCCCCIIAAAAA",
    "CCCCCCCCCCCEGGGG",
    "CCCCCCCCCCCCLLHL",
    "CCCCCCCCCCCCLPDP",
    "JJJCCCCCCCCCLDDD",
    "BBJJCCCCCCCCLDKD",
    "BNBJJCCCCCCCLDDF",
    "BBBJJCCCCCCCPPPP",
].join("\n");

テキストなので簡単です。

テキスト表示する

sample.as
addChild(bmpFont.createSprite(320, 320, mapText));
//もしくは
addChild(new TextFiled(320, 320, mapText, new TextFormat(bmpFont.name)));

みたいなノリで表示します。

スクリーンショット
おお、いい感じのマップが表示されたぞ!!

いやはい、いい感じなのはマップチップデータ画像の方ですね。
ユウラボさんのページの素材です。( http://skipmore.jugem.jp/?page=2&cid=13 )

スクリーンショット
リソースは全部1枚のアトラス画像にまとめてあるので、今回もドローコールは1でまかなえています。

アトラス画像
現在のパック画像は 188px * 231pxです。このデモでは、カナフォント使ってません。

まとめ

当然ですが、テキスト表示処理だとは思えない感じになりました。書き換えも重ね合わせも、簡単です。色の変更やフィルタ適用もできます。高速に書き換え続けなければパフォーマンス的にも大丈夫でしょう。

title-logo.png <Tiledで良さげクエー
いやいや、 Tiledのデータを読み込んで表示するのに使えるかもしれませんよ、ムクドリさん。

実際に動作するソースはここにあります。(前回と同じ)
https://github.com/harayoki/-qiita1/blob/atlas2bmpfont/src/StarlingMain.as

過去のビットマップフォントで遊ぶ投稿シリーズ

もう、続きません(笑)

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3