【講座?】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~【自分用メモ?】
コメントする
コメントするには、ログインする必要があります。
コメント一覧
コメントはありません。