【講座？】CoRを触ってみる15～三目並べを作る3～【自分用メモ？】
投稿者：
光楼（114）
投稿日：2017/04/29 14:28
【講座？】CoRを触ってみる14～三目並べを作る2～【自分用メモ？】←前回
今度はマリカ8DX購入。
#このブログの情報は2017年4月29日現在のものです。今後変更になる可能性があります。
前回の続きです。
game.rbを開いてね！
前回はクリックしたマスがどこかを求める処理を実装しました。
次はクリックしたマスに〇を置けるようにしましょう！
配列で盤面を管理する
まず、どこのマスがどんな状態かを管理する必要があるため、配列を使います。
配列名はboard_dataでいきます。
[]にマス番号を入れたらそのマスの状態を知れるようにします。
0だったら空白、1だったら〇が、-1だったら×が入っているということにします。
最初は全て空白ですので、0で埋めます。
次はクリックしたマスに1を入れましょう。
マスが空白の時のみ〇を置けるようにしています。
描画
さて、実際に〇を配置しましょう。
画像はもうクリップしていただいてると思います。
してない方は戻って戻って。
描画の処理はせっかくなのでrender内に書こうと思います。
定義
原点は左上にしました。
描画判断
どこに何を描画するかは盤面情報の変化を見て決めます。
簡単に言うと、変化したとこだけ描画する。
さて問題は変化したかをどう判断するかなんですが……。
ターン開始前の盤面情報とターン終了後を比較することにします。
そのためにはターン開始前の盤面情報を記録する配列が必要です。
作りましょう。
ターン開始前の盤面を記録させます。
さて、配列を複製する処理ですが、なぜ
ではなく、
なのか。
実は前者のやり方だとboard_dataを変化させたとき、comparison_board_dataも一緒に変化してしまうんです。
名前は違うのに中身は同じという厄介な事になります。
後者のように.dupを付ければ複製が出来ます。
ただこの方法、ドキュメントに書いてないんだけど……大丈夫だよね？ね？
続いて変化したかの判定です。
どこが変化したか調べます。
9.times do |i| ～ endは9回ループさせる処理です。数字を変えるとループ回数も変わります。
iには0～8の数が順に入ります。
〇配置
さぁ、実際に配置させましょう！
ポジションはマス番号をもとに計算します。
X座標：board_left_position + マス番号 % 3 * board_size
Y座標：board_up_position + (マス番号 / 3).floor * board_size
〇を何個も配置するのに変数circle_spriteは配列じゃなくていいのだろうかと思ったけど、表示するだけなら大丈夫そうです。
個別にモーションやらアニメーションを設定したいなら配列にした方が良いと思います。
scaleでは、マスのサイズが125*125なのに〇画像が150*150なので、拡大率を計算させています。
画像を変えたい方は150という数値を変数にすることをお勧めします。
さて今回はここまでです。
次回は敵が×を置く処理を実装したいので、色々書き換えると思います。
それでは。
全体像
次回→【講座？】CoRを触ってみる16～三目並べを作る4～【自分用メモ？】
ツイート
今度はマリカ8DX購入。
#このブログの情報は2017年4月29日現在のものです。今後変更になる可能性があります。
前回の続きです。
game.rbを開いてね！
前回はクリックしたマスがどこかを求める処理を実装しました。
次はクリックしたマスに〇を置けるようにしましょう！
配列で盤面を管理する
まず、どこのマスがどんな状態かを管理する必要があるため、配列を使います。
配列名はboard_dataでいきます。
[]にマス番号を入れたらそのマスの状態を知れるようにします。
0だったら空白、1だったら〇が、-1だったら×が入っているということにします。
最初は全て空白ですので、0で埋めます。
#=====対戦=====# scene 'game' do #変数定義 bg_sprite = nil #背景 mesh_sprite = nil #マス ##### ↓追加分↓ ##### board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:× ##### ↑追加分↑ ##### #後略#
次はクリックしたマスに1を入れましょう。
#前略#
update do
#クリックまたはタップしたか
if pointer.down?
column = ((pointer.x - board_left_position) / board_size).floor #列を求める
paragraph = ((pointer.y - board_up_position) / board_size).floor #段を求める
#列が0～2、段も0～2の範囲か
if (0..2) === column && (0..2) === paragraph
block = column + paragraph * 3 #列・段からマス番号を求める
##### ↓追加分↓ #####
if board_data[block] == 0 #選択したマスが空白か
board_data[block] = 1
debug_log "#{block}番のマスをクリック\n #{board_data}"
end
##### ↑追加分↑ #####
end
end
end
#後略#
マスが空白の時のみ〇を置けるようにしています。
描画
さて、実際に〇を配置しましょう。
画像はもうクリップしていただいてると思います。
してない方は戻って戻って。
描画の処理はせっかくなのでrender内に書こうと思います。
定義
#=====対戦=====# scene 'game' do #変数定義 bg_sprite = nil #背景 mesh_sprite = nil #マス ##### ↓追加分↓ ##### circle_sprite = nil #〇 ##### ↑追加分↑ ##### board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:× #後略#
#前略#
preload do
#背景素材読込み
image 'メニュー背景画像', id: 318428, frame_size: [225, 400], frame_pattern: 11
image 'マス画像', id: 319591
##### ↓追加分↓ #####
image '〇画像', id: 202007
##### ↑追加分↑ #####
end
#後略#
#前略# #=====定義=====# #スプライト sprite 'メニュー背景' do image 'メニュー背景画像' origin :left_top animation '通常アニメ', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 20, true end sprite 'マス' do image 'マス画像' end ##### ↓追加分↓ ##### sprite '〇' do image '〇画像' origin :left_top end ##### ↑追加分↑ #####
原点は左上にしました。
描画判断
どこに何を描画するかは盤面情報の変化を見て決めます。
簡単に言うと、変化したとこだけ描画する。
さて問題は変化したかをどう判断するかなんですが……。
ターン開始前の盤面情報とターン終了後を比較することにします。
そのためにはターン開始前の盤面情報を記録する配列が必要です。
作りましょう。
#=====対戦=====# scene 'game' do #変数定義 bg_sprite = nil #背景 mesh_sprite = nil #マス circle_sprite = nil #〇 board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:× ##### ↓追加分↓ ##### comparison_board_data = board_data.dup #盤面変化判定用配列 ##### ↑追加分↑ ##### #後略#
ターン開始前の盤面を記録させます。
#前略#
update do
##### ↓追加分↓ #####
comparison_board_data = board_data.dup #配列コピー
##### ↑追加分↑ #####
#クリックまたはタップしたか
if pointer.down?
#後略#
さて、配列を複製する処理ですが、なぜ
comparison_board_data = board_data
ではなく、
comparison_board_data = board_data.dup
なのか。
実は前者のやり方だとboard_dataを変化させたとき、comparison_board_dataも一緒に変化してしまうんです。
名前は違うのに中身は同じという厄介な事になります。
後者のように.dupを付ければ複製が出来ます。
ただこの方法、ドキュメントに書いてないんだけど……大丈夫だよね？ね？
続いて変化したかの判定です。
#前略#
render do
##### ↓追加分↓ #####
if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
end
##### ↑追加分↑ #####
end
#後略#
どこが変化したか調べます。
#前略#
render do
if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
##### ↓追加分↓ #####
#違うところを探す
9.times do |i| #9回ループ
if board_data[i] != comparison_board_data[i]
debug_log "#{i}番のマスが違う"
end
end
##### ↑追加分↑ #####
end
end
#後略#
9.times do |i| ～ endは9回ループさせる処理です。数字を変えるとループ回数も変わります。
iには0～8の数が順に入ります。
〇配置
さぁ、実際に配置させましょう！
ポジションはマス番号をもとに計算します。
X座標：board_left_position + マス番号 % 3 * board_size
Y座標：board_up_position + (マス番号 / 3).floor * board_size
render do
if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
#違うところを探す
9.times do |i| #9回ループ
if board_data[i] != comparison_board_data[i]
##### ↓追加分↓ #####
circle_sprite = put_sprite '〇' do
position board_left_position + i % 3 * board_size, board_up_position + (i / 3).floor * board_size
scale board_size / 150, board_size / 150
frame_index 0
end
##### ↑追加分↑ #####
end
end
end
end
〇を何個も配置するのに変数circle_spriteは配列じゃなくていいのだろうかと思ったけど、表示するだけなら大丈夫そうです。
個別にモーションやらアニメーションを設定したいなら配列にした方が良いと思います。
scaleでは、マスのサイズが125*125なのに〇画像が150*150なので、拡大率を計算させています。
画像を変えたい方は150という数値を変数にすることをお勧めします。
さて今回はここまでです。
次回は敵が×を置く処理を実装したいので、色々書き換えると思います。
それでは。
全体像
#=====対戦=====#
scene 'game' do
#変数定義
bg_sprite = nil #背景
mesh_sprite = nil #マス
circle_sprite = nil #〇
board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×
comparison_board_data = board_data.dup #盤面変化判定用配列
#定数定義
screen_width = 800 #ゲーム画面幅
screen_high = 450 #ゲーム画面高
board_size = 125 #盤面1マス当たりのサイズ
#定数計算
board_left_position = (screen_width / 2 - (board_size / 2 + board_size)).floor #盤面一番左の位置
board_up_position = (screen_high / 2 - (board_size / 2 + board_size)).floor #盤面一番上の位置
#デバッグ
debug_log "ソースファイル読込み完了！"
preload do
#背景素材読込み
image 'メニュー背景画像', id: 318428, frame_size: [225, 400], frame_pattern: 11
image 'マス画像', id: 319591
image '〇画像', id: 202007
end
create do
#背景画像配置
bg_sprite = put_sprite 'メニュー背景' do
position 0, 450
scale 2.0, 2.0
angle -90
frame_index 0
end
#マス画像配置
mesh_sprite = put_sprite 'マス' do
position 800 / 2, 450 / 2
frame_index 0
end
#背景アニメ開始
bg_sprite.start_animation('通常アニメ')
end
update do
comparison_board_data = board_data.dup #配列コピー
#クリックまたはタップしたか
if pointer.down?
column = ((pointer.x - board_left_position) / board_size).floor #列を求める
paragraph = ((pointer.y - board_up_position) / board_size).floor #段を求める
#列が0～2、段も0～2の範囲か
if (0..2) === column && (0..2) === paragraph
block = column + paragraph * 3 #列・段からマス番号を求める
if board_data[block] == 0 #選択したマスが空白か
board_data[block] = 1
debug_log "#{block}番のマスをクリック\n #{board_data}\n #{comparison_board_data}"
end
end
end
end
render do
if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
#違うところを探す
9.times do |i| #9回ループ
if board_data[i] != comparison_board_data[i]
#〇配置
circle_sprite = put_sprite '〇' do
position board_left_position + i % 3 * board_size, board_up_position + (i / 3).floor * board_size
scale board_size / 150, board_size / 150
frame_index 0
end
end
end
end
end
end
#シーンスタート
start_scene 'game'
#=====定義=====#
#スプライト
sprite 'メニュー背景' do
image 'メニュー背景画像'
origin :left_top
animation '通常アニメ', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 20, true
end
sprite 'マス' do
image 'マス画像'
end
sprite '〇' do
image '〇画像'
origin :left_top
end
次回→【講座？】CoRを触ってみる16～三目並べを作る4～【自分用メモ？】
コメントする
コメントするには、ログインする必要があります。
コメント一覧
コメントはありません。