ぬーぶのメモ帳

フリーゲームエンジン「Godot」でプログラム経験のない素人の備忘録 最近は色々な動作を考えて試すのが好き。

【Godot3】マインスイーパーを作ってみた2

素材の下準備が終わって
前: 【Godot】マインスイーパーを作ってみた1 - ぬーぶのメモ帳



前回素材の準備が終わっていよいよスクリプトをうち込んでいきます。

ノードの一括登録

まずはルートノードにスクリプトを作成、背景画像以外のノードをスクリプトに追加します。

この時わざわざ手入力で全てを登録するのは面倒です。

登録したいノードをドラッグした後に Ctrl を押しながらドロップすると・・・

一発で登録できて非常に楽ちんです。


次にマップのマスのサイズとマスの数を登録します。

#extends Node2D
#onready var num_tile: TileMap = $num_tile
#onready var cover_tile: TileMap = $cover_tile
#onready var cursor: Sprite = $Cursor

# vector2とかけるとマス目の位置を指定できる
const cell_size := 32

# マス目の数と合わせている ゲームのマス目を広げたり狭めたい場合は
# export を使って変更しやすくするのも良さげ
var cell_x = 10
var cell_y = 10
二次元配列

次はマス目の一つ一つを表すためのコードを書くのですがこれが少しややこしくなります。
いわゆる「二次元配列」と呼ばれるものになります。(詳しい説明は省くので知りたい方は検索して下さい)


簡単に言うと配列の中に複数の配列を入れることで2次元のマス目を表すことができます。
戦略シミュレーションやローグライク、レトロなRPGなどのマップが想像しやすいかもしれません。



イメージ図 になってるといいなあ・・・


コードにするとこうなります map_cell が X軸 中10個の配列が Y軸 になります。
※cell_x の数だけ Y軸 の配列の自動追加と考えましたが、今回は視覚的にわかりやすくあらかじめ Y軸 を10列登録しています。

var map_cell := [
	[],
	[],
	[],
	[],
	[],
	[],
	[],
	[],
	[],
	[],
]


マス目の配列が用意できたのでこの中にマス目の位置情報を vector2 で登録していきたいと思います。
登録することでタイルマップの位置と連動できて、カーソルの位置を表現するのにも使えます。


コード

func _ready() -> void:
	# cell_xの数だけ処理を繰り返す
	for x in cell_x:
		# cell_x より先に cell_y の数だけ繰り返す
		for y in cell_y:

			# for文 の x y のループの数値を Vector2 として登録
			var cell_position := Vector2(x, y)
			
			# 上のポジションにタイルを追加する 後で消す
			num_tile.set_cellv(cell_position, 1)

			# cell_y の数だけ 上の Vector2 が Y軸の配列に追加されている
			#それが終わると x の数が1つ増えるので 別のY軸の配列にVector2 が追加される
			map_cell[x].append(cell_position)
			
			# 段階的に処理される様を見せる 後で消す
			yield(get_tree().create_timer(0.05),"timeout")
実行時の画面サイズを変更

コードを実行する前に実行画面の設定を行うのを忘れていました。
プロジェクト → プロジェクト設定 を選択してください。

一般タグ の ウィンドウ項目 の サイズ を背景の画像サイズに合わせます。
ただ画面サイズが 320 x 320 ではテストの時少し小さいので、二倍の 640 x 640 にしました。



改めて上のコードを実行するとこうなります

動きがつくとスクリプトがどう処理されているのか分かりやすくなったのではないでしょうか。
Yの繰り返しの処理が終わるとXの処理が1つ進み、またYの繰り返し処理を行う・・これを cell_x の数だけ繰り返します。


現状のコードをすべて合わせるとこうなります。

#extends Node2D

onready var num_tile: TileMap = $num_tile
onready var cover_tile: TileMap = $cover_tile
onready var cursor: Sprite = $Cursor


const cell_size := 32

var cell_x = 10
var cell_y = 10

var map_cell := [
	[],
	[],
	[],
	[],
	[],
	[],
	[],
	[],
	[],
	[],
]


func _ready() -> void:
	for x in cell_x:
		
		for y in cell_y:
			var cell_position := Vector2(x, y)

			# 後で消す
			num_tile.set_cellv(cell_position, 1)

			map_cell[x].append(cell_position)

			# 後で消す
			yield(get_tree().create_timer(0.05),"timeout")


動きのある絵が取れたので今回はここまで、次回は爆弾の配置とその周りのステータスが変わるようにしたいです。

次:【Godot】マインスイーパーを作ってみた3 - ぬーぶのメモ帳