やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > pyxel > pyxeleditorにおけるTileMapエディタの使い方

pyxeleditorにおけるTileMapエディタの使い方

pyxel

　Imageエディタでタイルを作り、TileMapエディタで敷き詰める。

f:id:ytyaru:20200329093339p:plain

画面構成

f:id:ytyaru:20200329090109p:plain

  1. メニュー
  2. エディタ
  3. マップファイル
  4. 描画ツール
  5. タイル縮図
  6. 画像縮図
  7. 画像ファイル

仕様

　画像でタイルを作る。タイルを組合せてマップを作る。1 pyxresファイルあたり8つのマップを格納できる。

  • 1 pyxres = 8 map (0〜7番)
  • 1 map = 256 * 256 tile
  • 1 tile = 8 * 8 pixel

　1 pyxresファイルあたり最大3072種のタイルを格納できる。キャラの分が無くなる。

  • 1 pyxres = 3 image (0,1,2番)
  • 1 image = 256 * 256 pixel = 32 * 32 tile = 1024 tile
  • 1 pyxres = 3 image = 1024 tile * 3 image = 3072 tile
要素 ピクセル
タイル 8x8
マップ 2048x2048
  • 1 map = 96x96 tile
画面 ピクセル タイル
エディタ 128x128 16x16
タイル縮図 2048x2048 256x256
キー移動 ピクセル タイル
↑,↓,←,→ 64x64 8x8

f:id:ytyaru:20200329103543p:plain

描いてみる

　起動する。

pyxeleditor
  1. Alt+→キーを押下してタイルマップエディタへ遷移する
  2. まだ何もない……

f:id:ytyaru:20200329093356p:plain

　マップはタイルの組合せ。元となるタイルをイメージエディタで作成する必要がある。

  1. Alt+←キーを押下してイメージエディタへ遷移する

　イメージエディタでタイルを描く。1タイル＝8x8ピクセル。以下は「草地」のつもり。Imageエディタの使い方

f:id:ytyaru:20200329093538p:plain

　Alt+→キーを押下してタイルマップエディタへ遷移する。

f:id:ytyaru:20200329093550p:plain

  • タイルマップの初期値は、左上(0,0)のタイルが自動で敷き詰められた状態
  • 1マップ＝256x256タイル

　草だけだとつまらない。「花」も描いてみよう。

  1. Alt+←キーを押下してイメージエディタへ戻る
  2. 適当に花っぽいドット絵を書く

f:id:ytyaru:20200329093921p:plain

　マップに花を添えよう。

  1. Alt+→キーを押下してタイルマップエディタへ戻る
  2. 画像縮図にある花タイルをクリックする
  3. 描画ツールからペンをクリックする
  4. エディタで好きな座標をクリックすると花が配置される

f:id:ytyaru:20200329094040p:plain

　以上。あとは同様にタイルを増やしてマップへ配置していく。

　以下は「地面」のつもり。

f:id:ytyaru:20200329094428p:plain f:id:ytyaru:20200329093339p:plain

　1 pyxresファイルあたり8つまで異なるマップを作れる。それぞれ0〜7までの番号で識別される。画面下のTILEMAP付近にある-,+で番号を切替する。

f:id:ytyaru:20200329100232p:plain

不満

  • レイヤがない
    • 透明色がない
      • 今回でいえば花を草でなく地に配置したい（花の背景を透明にしたい）
  • 塗りつぶし範囲が狭い: 最大128x128。2048x2048や指定範囲にしたい
  • 8 mapしか作れない。少ない

前回まで

対象環境

$ uname -a
Linux raspberrypi 4.19.97-v7l+ #1294 SMP Thu Jan 30 13:21:14 GMT 2020 armv7l GNU/Linux