【講座？】CoRを触ってみる14～三目並べを作る2～【自分用メモ？】

光楼（114）

公開したゲーム
公開した素材
ブログ記事

投稿者： Material 185033 3 mini 光楼（114）投稿日：2017/04/23 15:03

≪【講座？】CoRを触ってみる15～三目並... | 【講座？】CoRを触ってみる13～三目並...≫

【講座？】CoRを触ってみる13～三目並べを作る1～【自分用メモ？】←前回

ついにゼルダクリア！

#このブログの情報は2017年4月23日現在のものです。今後変更になる可能性があります。

参考
https://github.com/akasata/cor/blob/master/doc/references/index.md

さて、今回は対戦画面を作ります。

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で割ることで何列目の何段目かを求めます。
つまり、取得した座標もずらさなければなりません。

求め方

一番左を0列目、一番右を2列目とします。

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～【自分用メモ？】

コメントする

コメントするには、ログインする必要があります。

コメント一覧

mosmoss(投稿日：2017/04/23 19:03, 履歴)

列段を求める計算と変数化、表など広く使えそうですね、勉強になります！

てるてる(投稿日：2017/04/23 18:01, 履歴)

だんだんできてきましたね!