検証05-3：pyxelのリソースの保存機能(3)

次に"pyxel_resource.toml"のパレット番号を書き換えてからリソースファイルに戻して、そのリソースファイルを読み込んで表示されるイメージがdata部のパレット番号と一致することを確認します。

(2)で色を調査した先頭6ドットのパレット番号を以下の様に変更して保存します。

・変更前

↓↓↓

・変更後

各パレット番号に割り当てられたカラーコードは以下の通りとなります。

パレット番号：色(RGB値)

230:白(255,255,255)

0:黒(0,0,0)

195:赤(255,0,0)

45:緑(0,255,0)

20:青(0,0,255)

200:紫(255,0,255)

続いて、書き換えた"pyxel_resource.toml"ファイルをリソースファイルに戻します。

・"pyxel_resource.toml"ファイルをリソースファイルに戻す手順

１．"pyxel_resource.toml"をドラッグ＆ドロップしてzipファイルに戻します。

zipファイル内に変更前の"pyxel_resource.toml"ファイルがあるため上書き確認が表示されます。

変更を反映するため「コピーして置き換える」を選択して上書きします。

２．拡張子を"pyxres"に戻します。

※ちなみに、ファイルの拡張子を"zip"のままにしてloadメソッドの読込ファイル名の拡張子部分を"zip"に変更して読み込んでも問題なく動作します。

そのためリソースエディタを使用せずに"pyxel_resource.toml"を直接書き換えて使用する場合は、zipファイルのまま使用することも一応可能です。

リソースファイルの拡張子を"zip"のまま使用する場合は、以下の様にloadメソッドのファイル名の拡張子を"zip"に変更して読み込みます。

----------------------------

px.load("assets/savetest.pyxres") → px.load("assets/savetest.zip")

---------------------------

パレット番号を書き換えた部分のイメージを確認のためテスト用ソースを実行します。

テスト用ソースはこちらを参照してください。

『検証05-3：pyxelのリソースの保存機能(1)』

実行画面

パレット番号を書き換えた左上部を拡大します。

↓↓↓

先頭6ドットが指定した色に変更されています。

※カラーコードの調査は省略します。

この様に"pyxel_resource.toml"ファイル内のdata部が読み込んだイメージのパレット番号と一致することが確認出来ます。

画像ファイルをそのままメモリ上に読み込んで使用することも可能ですが、読込後に加工してからリソースファイルに保存して再利用する場合に使える様な使えない様な…どうなんでしょう？

以上です。

検証05-3：pyxelのリソースの保存機能(2)

次にリソースファイルに保存したイメージがどの様に格納されているか確認します。

pyxelの開発者のkitao氏のブログにも書いてありますが、リソースファイル(.pyxres)はzip形式で、拡張子を".zip"に変更するとそのままzipファイルとして解凍して中身を取り出せます。

リソースファイルの中身を取り出す手順

１．拡張子を"pyxres"から"zip"に変更します。

２．拡張子を変更したファイルを右クリックして表示されたメニューの「ここに解凍」を選択します。

３．解凍すると、zipファイルから"pyxel_resource.toml"というファイルが取り出せます。

取り出したファイルはテキスト形式なので、テキストエディタで開いて中身を確認することが出来ます。

フリーソフトのサクラエディタで開くと、こんな感じのファイルになっています。

上から6行目に"data = [[8, 201, 207, 213, 219, 225, …"と、数字が羅列されている箇所があります。

ここに保存したイメージのパレット番号が1ドットずつ記録されています。

保存されているイメージを確認するため、このパレット番号にどの様なカラーコードが割り当てられているかを調査します。

※全てのパレット番号(32×32)を確認するのは大変なので、先頭から6ドット分のみを調査します。

今回使用したカラーパレットは以前作成したカラーパレット表示ツールで使用したものと同じなので、そのツールでパレットを表示して色を確認してみます。

カラーパレットの記事は、こちらを参照してください。

『検証05-1：pyxelのカラーパレットの色追加』

カラーパレット表示ツールでパレット番号＆カラーコードを表示します。

このサイズでは文字が見づらいので、確認するパレット番号を拡大表示します。

・6ドット分のパレット番号＆カラーコード："data = [[8, 201, 207, 213, 219, 225, …"

これでもまだ見づらいので、一覧表にまとめます。

・6ドット分のRGB成分別カラーコード一覧表

次に、保存した画像のカラーコードを調査して比較します。

調査方法は、ペイントの「色の選択」機能を使います。

・手順

１．対象の画像をペイントで開きます。

２．ツールの中の「色の選択」をクリックします。

３．アイコンがスポイトマークになるので、画像上の比較する１ドットをクリックします。

４．選択した色が「色１」に表示されるので、「色の編集」を開きます。

５．色の編集ウィンドウの「赤」「緑」「青」の値が、上記のカラーコード一覧表と一致していることを確認します。

６．手順２～５を調査対象の6色分全てに行います。

１．対象の画像をペイントで開きます。

※元画像が小さいので表示サイズを400%に拡大しています。

※黒枠で囲った部分の色を左から順に１色ずつ調査します。

２・３、ツールの「色の選択」を選んで、調査する1ドットをクリックします。

４．色1に選択した色が表示されるので、「色の編集」をクリックします。

５．ＲＧＢ値を確認します。

選択した色のＲＧＢ値が、カラーコード一覧表のパレット番号8のＲＧＢ値と一致することを確認します。

同様に他の5色も順に調査します。

・左から2番目の色

・左から3番目の色

・左から4番目の色

・左から5番目の色

・左から6番目の色

各々のＲＧＢ値が各パレット番号のＲＧＢ値と一致します。

この様に保存したイメージのパレット番号が1ドットずつ記録されています。

(2)は以上です。(3)に続きます。

検証05-3：pyxelのリソースの保存機能(1)

pyxelには読み込んだイメージを保存する機能があります。

この保存機能は拡張したパレットにも対応しているので255色のイメージも保存可能です。

但し、リソースエディタで開いても選べる色が16色なので編集は困難です。

※255色のパレットをイメージ1or2に保存しておいて、そこから1ドットコピーで色選択してイメージ0のエリアにペーストして絵を完成させる等の方法もありますが、現実的ではありません。

※リソースエディタで表示される色はパレット番号に割り当てられた色で表示されない場合があります。プログラムで保存したイメージとリソースエディタで開いたイメージは表示される色が必ずしも一致しません。

※サイズの拡張と色数追加対応されたことを考えると、そのうちリソースエディタでも対応すると思われます。

・プログラム上で作成したイメージをリソースファイル(.pyxres)に保存する方法

使用するリソース

※リソースはソースと同階層に作成した"assets"フォルダに置きます。

リソースファイル(savetest.pyxres)

変化が分かりやすい様に32×32の範囲を単色で色付けしておきます。

パレットファイル(savetest.pyxpal)

内容は、pyxel標準の16色＋Webセーフカラーのコード(計231色)

※255色ではありませんが、ここの解説ではこのデータで話を進めます。

パレットファイルの内容

読み込み用イメージファイル(loadsample.png)

※サイズは32×32

※Windows標準のペイントのカラーパレットを切り抜いて32×32に縮小しました。

上の画像が見づらいので拡大表示します。

※読み込み時にはパレットに存在しない色がパレットに存在する近い色に変換されるので、この画像よりかなり荒くなります。

※リソースはこちらを参照すると分かりやすいと思います。

『検証05-1：pyxelのカラーパレットの色追加』

--テスト用ソース--------------------------

import pyxel as px

class App:

    def __init__(self):

        px.init(50,50,title="savetest",display_scale=6)

        px.load("assets/savetest.pyxres")

        px.run(self.update,self.draw)

    def update(self):

        if px.btnp(px.KEY_S):

            px.save("assets/savetest.pyxres")

        if px.btnp(px.KEY_L):

            px.images[0].load(0,0,"assets/loadsample.png")

    def draw(self):

        px.cls

        px.blt(0,0,0,0,0,32,32)

App()

----------------------------

このソースを実行してイメージの保存機能を確認します。

１．実行時

実行画面にリソースファイルの内容(32×32の単色の四角)が表示されます。

２．Lキー押下時(読み込み用イメージファイル(loadsample.png)の読み込み＆表示)

loadsample.pngファイルが読み込まれます。

※パレットに存在しない色はパレットに存在する近い色に変換されます。

３．Sキー押下(リソースファイル(savetest.pyxres)に保存)

リソースファイルに保存されます。

※リソースエディタを開くと保存した画像とはかなり違う色で表示されます。

※ややこしいですが、パレット番号は上記の２で表示された絵と一致している様です。

保存後にリソースエディタで保存したイメージを表示

４．一度終了して再度実行

リソースファイルが更新されているので、最初に読み込んだ単色ではなく保存した絵が読み込まれます。

※リソースエディタで表示された色ではなく、保存した色で読み込まれます。

この様にプログラムで作成したイメージをリソースファイルに保存することが出来ます。

※saveメソッドで指定するファイル名を変更することで別のファイルに保存することも可能です。但し、パレットファイルは作成されないので、保存したリソースファイル用のパレットファイルを作成する必要があります。

(1)は以上です。(2)に続きます。

テトリス(pyxel版)のスマホ対応

以前に作成したテトリスはPCのキーボードで操作する前提だったのでゲームパッドでの入力は組み込んでいなかったんですが、webで公開するとなるとスマホでも開けるので、一応ゲームパッド対応して操作だけは出来る様にしておこうと思いました。

『初心者級ゲーム03：テトリス(pyxel版)』

画面的には何も変わりませんが、updateメソッドにゲームパッドの入力を受け付ける様にしました。

スマホで操作出来る様にしただけなので文字が小さい等の配慮は一切していません。

ゲームパッド対応版テトリスのゲームプレイはこちら

テトリス(pyxel版)

-ソース(updateメソッドのみを抜粋)-----------------

    def update(self):

        keyin={

            "u":px.btnp(px.KEY_UP)                  #上

            or px.btnp(px.GAMEPAD1_BUTTON_DPAD_UP),

            "r":px.btnp(px.KEY_RIGHT,8,2)               #右

            or px.btnp(px.GAMEPAD1_BUTTON_DPAD_RIGHT,8,2),

            "d":px.btnp(px.KEY_DOWN,8,2)                #下

            or px.btnp(px.GAMEPAD1_BUTTON_DPAD_DOWN,8,2),

            "l":px.btnp(px.KEY_LEFT,8,2)                #左

            or px.btnp(px.GAMEPAD1_BUTTON_DPAD_LEFT,8,2),

            "ent":px.btnp(px.KEY_KP_ENTER)          #選択

            or px.btnp(px.KEY_RETURN)

            or px.btnp(px.GAMEPAD1_BUTTON_Y),

            "spc":px.btnp(px.KEY_SPACE)             #スペース

            or px.btnp(px.GAMEPAD1_BUTTON_B),

            "lclk":px.btnp(px.MOUSE_BUTTON_LEFT),   #Lclick

            "rclk":px.btnp(px.MOUSE_BUTTON_RIGHT,8,2)   #Rclick

        }

        if self.gmovflg==0: #ゲーム中

            t1=tm.time()                    #現時間取得

            if t1-self.t0>=self.dist/10:    #割り込み周期以上の場合

                self.blkdrop()              #ブロックドロップ処理

                self.t0=tm.time()           #基準時間更新

            #移動

            self.mh=-sign(px.mouse_wheel)  #マウスホイール状態更新

            if self.mh:

                oldbx=self.bx   #ブロックx座標を保存

                self.bx=self.bx+self.mh     #マウスホイール操作をブロックに反映

                if self.chkbox()==False:    #重なりチェック

                    self.bx=oldbx

            elif keyin["l"] or keyin["r"]: #左右矢印キー

                oldbx=self.bx   #ブロックx座標を保存

                if keyin["l"]:    #左矢印キーの場合

                    self.bx-=1  #左に移動

                else:                       #右矢印キーの場合

                    self.bx+=1  #右に移動

                if self.chkbox()==False:    #重なりチェック

                    self.bx=oldbx

            elif (keyin["rclk"] or keyin["d"]) and self.t1==0:   #右クリックor下矢印キー

                self.blkdrop()      #ブロックドロップ処理

                self.t0=tm.time()   #基準時間更新

            if tm.time()-self.t1>0.2:

                self.t1=0

            #回転

            #左クリックorスペースキーor上矢印キー

            if keyin["lclk"] or keyin["spc"] or keyin["u"]:

                oldset=self.set #ブロック向きindexを保存

                self.set=(self.set+1)%self.l[self.typ][1]

                if self.chkbox()==False:    #重なりチェック

                    self.set=oldset

        else:   #ゲームオーバー時

            if keyin["lclk"] or keyin["ent"]:

                self.gameinit() #左クリックorENTERキー押下でゲーム再開

-------------------------------------------------------

以上です。

選択リスト表示クラス(pyxel版)

ゲーム中に複数項目からひとつを選択する必要がある場合に、その選択候補の表示と選択された対象のインデックスを返す処理をクラス化しました。

アイテムを選択して使用する場合や移動先の選択等に使用することを想定しています。

使用文字列は全角文字のみで選択候補の表示枠はタイトルと選択候補の文字数および候補数からリストの大きさを自動調整する様にしてあります。

ソースはGoogleドキュメントに載せてあります。

選択リスト表示クラス

選択リスト表示クラスの呼出サンプルソースをGoogleドキュメントに載せてあります。

選択リスト表示クラス呼出サンプル

フォントは美咲フォントを使用しています。

サンプルソースでは、最初は「selectline:0」(0はリストインデックス)とだけ表示された画面が表示されています。

1.起動画面

2.リスト表示：スペースキーでリストを表示します。

3.項目選択：矢印の上下キーで選択します。

4.候補決定：決定するとリストが消えます。

↓↓↓ENTERキー押下

↓左上部を拡大

決定前も「selectline」は選択中のリストインデックスに更新される様にしてあります。

※選択中の行に対応するアイテムを表示する場合等を想定しています。

以上です。

検証05-2：pyxelのパレットファイルの読み込み

pyxelのカラーパレット変更は「colors.from_list」を使用する以外にパレットファイルを読み込む方法があります。

リソースファイル(.pyxres)の読み込み時に、同じフォルダにリソースファイルと同名のパレットファイル(.pyxpal)が存在する場合、そのパレットファイルを読み込んでパレットの設定色が変更されます。

例：

リソースファイルが

a.pyxres

の場合、パレットファイルは

a.pyxpal

になります。

パレットファイルは改行区切りの16進数で書かれたカラーコード(0～ffffff)が色数分書かれたファイルです。

例：pyxelのデフォルトのカラーパレット

↓ここから----------------------------

0
2b335f
7e2072
19959c
8b4852
395c98
a9c1ff
eeeeee
d4186c
d38441
e9c35b
70c6a9
7696de
a3a3a3
ff9798
edc7b0

↑ここまで----------------------------

サンプルとして、pyxelデフォルト+セーフカラーのパレットファイル(231色)の内容をGoogleドキュメントに載せました。

pyxelデフォルト+セーフカラーのパレットファイル

パレットファイルに設定可能な色数(行数)は1～255の範囲になります。

16色未満でも設定は可能ですが、その場合はリソースエディタのパレットの一部が選択出来なくなります。

※上図は黒「0」,白「ffffff」の2色のみに設定した場合です。白の右側全てと下段のパレットは選択出来ません。

なお、パレットファイルを空ファイルにするとエラーが発生します。

※リソースエディタは起動しますが、点を書き込む等の何かを描く操作でエラーになります。

パレットファイルから読み込んだ場合、設定したパレットより後ろのパレット番号を指定するとエラーが発生します。

例：パレットファイルが30行だった場合、「pyxel.colors[50]=0xdddddd」等はインデックスエラー発生

※「colors.from_list」でパレットを追加した場合も同様です。

そのため、プログラム実行中にパレットの書き換えを行う場合は、予めパレットを254まで確保しておくとパレット数に関しては管理が不要になります。

無駄になる場合もありますが、シビアな環境でなければインデックス管理が少し楽になるかも知れません。

以上です。

検証05-1：pyxelのカラーパレットの色追加

pyxelはver2.0からカラーパレットを追加して16色を超える色数が使える様になっています。

pyxelの公式サイトの情報で「グラフィックス」の「colors」の項に載っている一文、

「パレットの…」の説明にある「colors.from_list」と「colors.to_list」とその中の例が参考になりそうなので、そこから調べてみました。

・「colors.to_list」：現在のカラーパレットをリストで取得

・「colors.from_list」：カラーパレットをリストでまとめて更新

・「colors[n]」※nは0～254：指定したインデックスのカラーパレットを1つだけ更新

範囲外のインデックスを使用したり、要素が255を超えるリストを設定すると以下のエラーが発生します。

----------------------------

pyo3_runtime.PanicException: Number of colors must be between 1 to 255

----------------------------

※インデックスは「0～254」の255色が指定可能です。

pyxelのサンプルプログラム「05_color_palette.py」には16色分のカラーパレットを表示する機能があります。

このサンプルを少し手直しして、追加されたカラーパレットも表示出来る様にしてみました。

手直ししたソースはGoogleドキュメントに載せてあります。

カラーパレット追加

実行画面

パレット番号の0～15は既存のカラーパレットのカラーコードがそのまま設定されています。

16～230は以下のパターンでカラーコードを設定しています。

・各色相の値は0x00→0x33→0x66→0x99→0xcc→0xff→繰り上がって0x00に戻るのを繰り返す。

・0x10000倍の桁が赤、0x100倍の桁が緑、0x1倍の桁が青。

・0xffffffで終了。

※要はWebセーフカラー(ブラウザやOSの種類に関係なく、Web ページで常に表示できる216色のカラー)です。

追加用カラーコード一覧：PNoは通し番号(パレット番号は既存の最終パレット番号(=15)+PNoになります)

※PNo=0(カラーコード：0x000000)はpyxelデフォルトのカラーパレット0に存在するので追加対象から除外

上記から更にカラーパレットを追加して最大数の254まで埋めてみます。

以下の図はパレット番号231以降を最大値(254)まで0埋めして、最終インデックスが分かりやすい様にパレット番号254には0xddddddを上書きで設定しています。

この様に、カラーパレットを最大255色まで設定することが可能です。

次に色を追加することによる画像読み込み時の色変換の変化を確認します。

pyxelではpng等の画像ファイルを読み込んだ際に画像の中のカラーパレットに存在しない色がカラーパレットに存在する近い色に自動変換されます。

そこで、カラーパレットの色数が16色の時と、色数を増やした時とで同じ画像がどの様に変換されるかを比較してみます。

読み込む画像は、Windows標準ソフトのペイントで色の編集時に表示されるカラーパレット部分を切り取って使用します。

ペイント

赤矢印の部分をクリックすると色の編集画面が表示されます。

↓↓↓

「色の編集」で表示されるカラーパレットの部分だけを切り取ってファイルに保存します。

↓↓↓

このファイルをプログラムから参照可能な場所に置いて、pyxelのイメージクラスのloadメソッドで読み込んで表示します。

読み込んで表示した結果が以下になります。

左が16色のまま読み込んだ画像、右がパレット番号230までカラーパレットを追加して読み込んだ画像

※カラーパレット追加前に画像を読み込むと16色の状態で変換されるので、画像はカラーパレット追加後に読み込みます。

この様により多くの色が使用された画像に変換されることが分かります。

上記のテストではカラーコードを機械的に設定して追加しましたが、設定する色を調整することでより繊細な色彩の画像に変換することも可能になります。

サンプルとして、以下の花(ツバキ)の画像をカラーパレットを変更して読み込んでみます。

オリジナル画像

左から、

・pyxelデフォルトのカラーパレット

・上記のテストで機械的にパレット番号230まで設定したカラーパレット

・pyxelデフォルト+この画像で使用された色に合わせたカラーパレット

となります。

右の画像のカラーパレットは以下の様になっています。

この様に画像に特化したパレット構成にすると再現性がかなり高くなるのが分かると思います。

カラーパレットがこれだけ増えると、キャラやオブジェクト等に少しずつパレットを割り振って、表示するもの毎に部分的に書き換えながら使うと色数はほぼ無制限と考えられます。パレットの管理は大変そうですが…

以上です。

検証04-4：擬似3D迷路の多階層化(pyxel版)

壁伸ばし法で作成した迷路は、(偶数,偶数)のマスは必ず壁になり、(奇数,奇数)のマスは必ず通路になる特徴があります。

※左上の座標を(y,x)=(0,0)とした場合

例えば通路に宝箱や仕掛けを作ろうとした場合、(奇数,奇数)のマスに作れば壁かどうかをいちいち調べる必要がなく設置出来ます。

この特徴から(奇数,奇数)のマスに梯子やエレベータ等の(y,x座標が移動しない)垂直昇降装置を作ると、別の迷路でも大きさが同じなら確実に通路に移動することが出来ます。

そこで、今回は同じ大きさの迷路を多階層化して、謎のワープ装置で上の階(つまり別の迷路)の同じ座標に移動する処理を組み込んでみました。

あと、迷路が難解になり過ぎるので自分の周囲だけを確認出来るミニマップを右下に付けました。

こちらも参照：

『検証04-1：迷路内の擬似３Ｄ化(pyxel版)(1)：擬似３Ｄの描画』

pyxelの機能でgifを作ってみました。

操作方法：

前進：↑ボタン、左旋回：←ボタン、右旋回：→ボタン、振り返り：↓ボタン

壁色変更：スペースキー、迷路リセット：Qキー

※マウスでの操作も可能です。

前進、振り返り：マウスホイール、左旋回：左クリック、右旋回：右クリック

迷路リセット：左右同時クリック(操作が少しシビアですが…)

※ゲームコントローラーでの操作も可能です。

※PS4のゲームパッドでテストしました

前進：↑、振り返り：↓、左旋回：←、右旋回：→、

迷路リセット：OPTIONSボタン(STARTボタン？)

※謎のワープ装置のマスに移動すると装置が勝手に起動してワープします。

※ゴールに到達しても「GOAL!」と表示されるだけです。

ソースはGoogleドキュメントに載せてあります。

迷路の多階層化

githubにhtmlを置いて実行出来る様にしてみました。

web版

リソース：イメージバンク0

迷路内の擬似３Ｄ化のリソースに謎のワープ装置を追加しました。

※下向き三角は下層へのワープ用ですが今回は未使用です。

以上です。

検証04-3：迷路内の擬似３Ｄ化(pyxel版)(3)：壁の描画順

視界内に表示される壁を把握して実際に壁を描画する際、壁の見た目上の重なりを表現するために描画する順序を工夫する必要があります。

工夫と言っても難しいことではなく遠い壁から描画して、先に描画した壁が後に描画した壁に上書きされることを利用します。

奥の壁の一部が手前の壁に隠れる場合に、隠れる部分の描画範囲の計算などの特別な考慮をする必要なく壁の遠近を表現出来ます。

但し、同じ距離の壁の内横壁をセットで描画する場合、より外側から描画する必要があります。

壁の描画順の例

・遠距離→中距離→近距離→側の順で描画します。

・同距離の中で、遠距離は横壁を描画しないので順不同、他は端から順に描画します。

※中距離の描画順は上記の例以外に、左2→左1→右2→右1→0でも問題ありません。

サンプルマップを使用して壁が上書きされて一部(または全部)が隠れる様子を確認します。

サンプルマップ：自分の位置=(7,3)＆上向き

※描画のロジックの一部をコメントアウトして手前の壁が表示されない様に調整しながら確認します。

1.遠距離のみ(赤枠の範囲)表示

→遠距離の正面壁のみ表示されます。

2.遠距離＋中距離を表示

→左側の遠距離の壁が中距離の壁に上書きされて見えなくなります。

3.遠距離＋中距離＋近距離を表示

→遠距離と中距離の壁全てが近距離の壁に上書きされて見えなくなります。

4.遠距離＋中距離＋近距離＋側を表示

→右側の近距離の壁が側の壁に上書きされて見えなくなります。

この様に遠くの壁から順に描画することで、描画範囲の細かい調整等をすることなく遠くの壁が隠れて見えないことを表現出来ます。

但し、例えば見える範囲のみマッピングしていく様な機能を追加する場合にはどこが見えなくなるのかを正確に把握する必要があるので、壁の一部分だけ見えている場合の描画が楽になる程度になります。

以上です。

検証04-2：迷路内の擬似３Ｄ化(pyxel版)(2)：「向き」と「視界」②

２. 三角関数を使用した相対座標の求め方

視界内の相対座標を求める際に、予め4方向全ての相対座標をリスト等に入れておいて使用することも出来ますが、ここでは三角関数のsinとcosを用いて使用時点で計算して求めます。

コンピュータの座標で三角関数を使用するに当たり、ひとつ注意があります。

数学の座標平面とコンピュータの画面の座標ではY軸のプラスとマイナスの向きが逆になります。

そこで、Y座標を求めるのに使用するcosは取得した結果にマイナスを掛けて使用します。

※追記

斜めの計算は必要なかったので、現在は上(0°)・右(90°)・下(180°)・左(270°)の4方向で計算しています。

↓以下はあまり考えずに取り合えず作ってみた時のやり方の説明です。

まずcos(マイナスを掛けるので正確には"-cos")とsinの角度毎の値を確認します。この表の値は自分の位置から見ている方向を表すベクトルになります。

※使用する際は-cosとsinの値をROUND関数で四捨五入します。

・45°毎の-cosとsinの一覧表

※便宜上、この表は「CS表」と略します。

※上表の-cosとsinの値はROUND関数に影響が出ない範囲で丸めています。

　→例えば、実際の-cos 45°の値は-0.70710678…となります。

※表外の丸数字は、自分の周囲の相対座標取得時に使用します。

イメージとしては、Y軸が逆向きの座標平面の真ん中に立って、その角度をROUND(-cos)とROUND(sin)が示す距離分見ている感じになります。

2-(1) 上向きの相対座標の求め方

2-(1)-1 自分の位置(0,0)の周囲の相対座標の求め方

上向き(角度0°)時の視界は-90°～90°の範囲になり、CS表の「⑦⑧①②③」の値が対象となります。

座標平面で表すと下図の範囲になります。

視界のイメージ図(上向きの場合)

視界内の相対座標表(上向きの場合)

y=ROUND(-cos)、x=ROUND(sin)とした場合、この座標平面を視界のイメージ図の赤枠の範囲に見立てると相対座標表(上向きの場合)とCS表の値が一致します。

この赤枠内の値を利用して上向きの視界内の全てのマスの座標を求めることで、向き変更時にもCS表の角度の範囲を変更するだけで変更した向きの全てのマスの座標が求まります。

2-(1)-2 正面の相対座標(近0、中0、遠0)の求め方

近0の座標は①と一致するので①の座標(-1,0)となります。

中0と遠0の座標は、それぞれ近0の2倍、3倍の距離になるので①×2(=(-2,0))、①×3(=(-3,0))で求まります。

2-(1)-3 正面以外の相対座標の求め方

正面以外の座標は、自分の位置(0,0)から右1マス分のベクトルを求めて、中0、遠0から横向きの距離を計算することで求まります。

(0,1)-(0,0)→(0,1)となります。

↓↓↓

各相対座標は以下の通り

中右1：(-2,0)+(0,1)→(-2,1)

中右2：(-2,0)+(0,1)×2→(-2,2)

中左1：(-2,0)-(0,1)→(-2,-1)

中左2：(-2,0)-(0,1)×2→(-2,-2)

遠右1：(-3,0)+(0,1)→(-3,1)

遠右2：(-3,0)+(0,1)×2→(-3,2)

遠左1：(-3,0)-(0,1)→(-3,-1)

遠左2：(-3,0)-(0,1)×2→(-3,-2)

2-(2) 上向き以外の相対座標の求め方

・右向きの相対座標

右向き(角度90°)時の視界は0°～180°の範囲になり、CS表の「①②③④⑤」の値が対象となります。

視界のイメージ図(右向きの場合)

視界内の相対座標表(右向きの場合)

CS表

CS表の①～⑤と相対座標表が一致

・正面の座標

上向きの計算と同様にそれぞれのマスの座標を求めます。

近0が③の座標(0,1)なので、中0と遠0の座標は③×2(=(0,2))、③×3(=(0,3))となります。

・正面以外の座標

自分の位置から右1マス分=(1,0)なので、各相対座標は以下の通り

中右1：(0,2)+(1,0)→(1,2)

中右2：(0,2)+(1,0)×2→(2,2)

中左1：(0,2)-(1,0)→(-1,2)

中左2：(0,2)-(1,0)×2→(-2,2)

遠右1：(0,3)+(1,0)→(1,3)

遠右2：(0,3)+(1,0)×2→(2,3)

遠左1：(0,3)-(1,0)→(-1,3)

遠左2：(0,3)-(1,0)×2→(-2,3)

となります。

下向き、左向きも同様の計算手順なので省略します。

「向き」と「視界」は以上です。(3)に続きます。