【講座?】CoRを触ってみる14~三目並べを作る2~【自分用メモ?】
投稿者: 光楼(114) 投稿日:2017/04/23 15:03
【講座?】CoRを触ってみる13~三目並べを作る1~【自分用メモ?】←前回
ついにゼルダクリア!
#このブログの情報は2017年4月23日現在のものです。今後変更になる可能性があります。
さて、今回は対戦画面を作ります。
game.rbを開いてね!
背景表示
前回同様、緑の背景を表示、アニメーションさせます。
説明は割愛!
さて、お次はマスを表示します。
はいドン!!!
スプライトを定義する時にorigin(原点)を設定してないのは、デフォルトで原点が画像の中心になっているからです。
スプライトを配置するときにpositionを ゲーム画面の横幅/2,縦/2 にする事でど真ん中に配置できます。
クリック判定
左上のマスから右下へ0~8の番号を付けます。
って感じで。
マスをクリックしたときに何番のマスかをログに番号を出力することで、クリック判定が正常かを確かめましょう。
update内に書いていきます。
この中に、クリックまたはタップした座標からどのマスを選択したかを求める処理を書きます。
1マス当たり125x125pixelなので中心から一番左上まで 125 + 125/2(1マス半) つまり187.5pixel離れていることになります。
っておいまてや小数点どう処理したら良いんやこれ……
真ん中のマスの左上の座標はXが337くらいのようでした。画面の中心800/2からマスのサイズの半分である125/2を引くと400-62.5で337.5。
てことは小数点は切り捨ててるんですかね。よし、そう仮定しましょう!どっちにしろそんなに影響ないし!
つまり左上(0番)のマスの座標はXが212~337、Yが37~162。上(1番)のマスがX:337~462、Yは変わらず……と。
さて、座標の求め方が分かったので実際に処理を書いていきましょう。
if文を使って、クリック座標がここからここまでなら何番のマス……ってやってもいいんですが、とても面倒なので計算で求めます。
計算方法は簡単。マスの一番左上の座標を(0, 0)とし、取得した座標X,Yをそれぞれ125で割ることで何列目の何段目かを求めます。
つまり、取得した座標もずらさなければなりません。
求め方
1.マス目の一番左上の座標X:212を0とするので、マウス座標から212を引きます。
2.その結果を125(マス1つあたりの幅)で割り、小数点を切り捨てます。
ってあれ、小数点切り捨てる方法なくね……?
……どうやら数値.floorで出来る模様。とりあえずこれを使いましょう。
因みに負の数は絶対値の大きい方(-1.2なら-2)になるようです。
列を求めることが出来ました。
1.マス目の一番左上の座標Y:37を0とするので、マウス座標から37を引きます。
2.その結果を125(マス1つあたりの高さ)で割り、小数点を切り捨てます。
画面サイズやマスサイズを変えるときに楽に変えられるよう、変数化しましょう。
さて、実際に何番目のマスかを出力する処理を書きます。
計算したものを変数に入れます。
さて次はマスをクリックしているかを判定させます。
マスがあるのは0列目から2列目、0段目から2段目まで。
それ以外はマスのない場所です。
さて次は列・段からマス番号を求めます。
計算方法は列+段*3です。
クリックするとちゃんとマス番号が出力されると思います。
今回はここまで。
お疲れさまでした!
次回→【講座?】CoRを触ってみる15~三目並べを作る3~【自分用メモ?】
ツイート
ついにゼルダクリア!
#このブログの情報は2017年4月23日現在のものです。今後変更になる可能性があります。
さて、今回は対戦画面を作ります。
game.rbを開いてね!
背景表示
前回同様、緑の背景を表示、アニメーションさせます。
説明は割愛!
#=====対戦=====# scene 'game' do #変数定義 bg_sprite = nil #背景 #デバッグ debug_log "ソースファイル読込み完了!" preload do #背景素材読込み image 'メニュー背景画像', id: 318428, frame_size: [225, 400], frame_pattern: 11 end create do #背景画像配置 bg_sprite = put_sprite 'メニュー背景' do position 0, 450 scale 2.0, 2.0 angle -90 frame_index 0 end #背景アニメ開始 bg_sprite.start_animation('通常アニメ') end update do end render do 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
さて、お次はマスを表示します。
はいドン!!!
#=====対戦=====# scene 'game' do #変数定義 bg_sprite = nil #背景 ##### ↓追加分↓ ##### mesh_sprite = nil #マス ##### ↑追加分↑ ##### #デバッグ debug_log "ソースファイル読込み完了!" preload do #背景素材読込み image 'メニュー背景画像', id: 318428, frame_size: [225, 400], frame_pattern: 11 ##### ↓追加分↓ ##### image 'マス画像', id: 319591 ##### ↑追加分↑ ##### 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 end render do 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 ##### ↑追加分↑ #####
スプライトを定義する時にorigin(原点)を設定してないのは、デフォルトで原点が画像の中心になっているからです。
スプライトを配置するときにpositionを ゲーム画面の横幅/2,縦/2 にする事でど真ん中に配置できます。
クリック判定
左上のマスから右下へ0~8の番号を付けます。
0 1 2 3 4 5 6 7 8
って感じで。
マスをクリックしたときに何番のマスかをログに番号を出力することで、クリック判定が正常かを確かめましょう。
update内に書いていきます。
update do ##### ↓追加分↓ ##### if pointer.down? end ##### ↑追加分↑ ##### end
この中に、クリックまたはタップした座標からどのマスを選択したかを求める処理を書きます。
1マス当たり125x125pixelなので中心から一番左上まで 125 + 125/2(1マス半) つまり187.5pixel離れていることになります。
っておいまてや小数点どう処理したら良いんやこれ……
真ん中のマスの左上の座標はXが337くらいのようでした。画面の中心800/2からマスのサイズの半分である125/2を引くと400-62.5で337.5。
てことは小数点は切り捨ててるんですかね。よし、そう仮定しましょう!どっちにしろそんなに影響ないし!
つまり左上(0番)のマスの座標はXが212~337、Yが37~162。上(1番)のマスがX:337~462、Yは変わらず……と。
さて、座標の求め方が分かったので実際に処理を書いていきましょう。
if文を使って、クリック座標がここからここまでなら何番のマス……ってやってもいいんですが、とても面倒なので計算で求めます。
計算方法は簡単。マスの一番左上の座標を(0, 0)とし、取得した座標X,Yをそれぞれ125で割ることで何列目の何段目かを求めます。
つまり、取得した座標もずらさなければなりません。
求め方
- 列
1.マス目の一番左上の座標X:212を0とするので、マウス座標から212を引きます。
2.その結果を125(マス1つあたりの幅)で割り、小数点を切り捨てます。
ってあれ、小数点切り捨てる方法なくね……?
……どうやら数値.floorで出来る模様。とりあえずこれを使いましょう。
因みに負の数は絶対値の大きい方(-1.2なら-2)になるようです。
update do ##### ↓追加分↓ ##### debug_log "列:#{((pointer.x - 212) / 125).floor}" ##### ↑追加分↑ ##### if pointer.down? end end
列を求めることが出来ました。
- 段
1.マス目の一番左上の座標Y:37を0とするので、マウス座標から37を引きます。
2.その結果を125(マス1つあたりの高さ)で割り、小数点を切り捨てます。
update do ##### ↓変更分↓ ##### debug_log "列:#{((pointer.x - 212) / 125).floor} 段:#{((pointer.y - 37) / 125).floor}" ##### ↑変更分↑ ##### if pointer.down? end end
画面サイズやマスサイズを変えるときに楽に変えられるよう、変数化しましょう。
#=====対戦=====# scene 'game' do #変数定義 bg_sprite = nil #背景 mesh_sprite = nil #マス ##### ↓追加分↓ ##### #定数定義 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 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 ##### ↓変更分↓ ##### debug_log "列:#{((pointer.x - board_left_position) / board_size).floor} 段:#{((pointer.y - board_up_position) / board_size).floor}" ##### ↑変更分↑ ##### if pointer.down? end end render do 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
さて、実際に何番目のマスかを出力する処理を書きます。
計算したものを変数に入れます。
update do ##### ↓追加分↓ ##### #クリックまたはタップしたか if pointer.down? column = ((pointer.x - board_left_position) / board_size).floor #列を求める paragraph = ((pointer.y - board_up_position) / board_size).floor #段を求める end ##### ↑追加分↑ ##### end
さて次はマスをクリックしているかを判定させます。
マスがあるのは0列目から2列目、0段目から2段目まで。
それ以外はマスのない場所です。
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 debug_log "マスをクリック" else debug_log "マス以外をクリック" end ##### ↑追加分↑ ##### end end
さて次は列・段からマス番号を求めます。
計算方法は列+段*3です。
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 #列・段からマス番号を求める debug_log "#{block}番のマスをクリック" ##### ↑変更分↑ ##### end end end
クリックするとちゃんとマス番号が出力されると思います。
今回はここまで。
お疲れさまでした!
次回→【講座?】CoRを触ってみる15~三目並べを作る3~【自分用メモ?】
コメントする
コメントするには、ログインする必要があります。