【講座？】CoRを触ってみる22～三目並べを作る9(終)～【自分用メモ？】

光楼（114）

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

投稿者： Material 185033 3 mini 光楼（114）投稿日：2017/07/02 18:06

≪Rmake8周年だよー！ | 【講座？】CoRを触ってみる21～三目並...≫

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

課金してゆるゆり全話一気見してました。

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

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

今回はゲームに音楽を追加します。

実質これが終わればゲーム完成です。

ではまずタイトル画面で音楽を鳴らしましょう！

今回用意したのはこちら↓

音楽

朝だー！

素材をゲームに追加する方法は導入編で解説したので説明は省きます。
実際音楽の鳴らし方もRmakeSoundクラス編でやってるんだけどね。

では、start.rbを開いてください。

#前略
#=====メニュー=====#
scene 'menu' do
  #変数定義
  bg_sprite = nil #背景
  title_textsprite = nil #タイトル
  description_textsprite = nil #説明文

  ##### ↓追加分↓  #####
  op_music = nil #音楽
  ##### ↑追加分↑  #####

  preload do 
    #背景素材読込み
    image 'メニュー背景画像', id: 318428, frame_size: [225, 400], frame_pattern: 11

    ##### ↓追加分↓  #####
    #音楽素材読込み
    music 'オープニング音楽', id: 279914
    ##### ↑追加分↑  #####
  end

  create do
    #背景画像配置
    bg_sprite = put_sprite 'メニュー背景' do
      position 0, 450
      scale 2.0, 2.0
      angle -90
      frame_index 0
    end

    #タイトル配置
    title_textsprite = put_text 'タイトル' do
      position 800/2, 450/4
      text '三目並べ'
    end

    #説明文配置
    description_textsprite = put_text '説明文' do
      position 800/2, 450/4*3
      text '- 画面をクリックでスタート -'
    end

    ##### ↓追加分↓  #####
    #音楽作成
    op_music = add_music('オープニング音楽')
    #再生
    op_music.play
    ##### ↑追加分↑  #####

    #背景アニメ開始
    bg_sprite.start_animation('通常アニメ')
  end
#後略

音楽が鳴らないよ！って方はブラウザのキャッシュを消してください。

別のソースファイルを実行する場合、再生している音楽は止まらないので止める必要があります。

#前略
  update do
    #クリック＆タップ判定
    if pointer.down?
      ##### ↓追加分↓  #####
      #音楽停止
      op_music.stop
      ##### ↑追加分↑  #####

      #シーン「game」の開始
      change_scene 'game'
    end
#後略

次はgame.rbを開いてください。
対戦画面では

音楽

パズルな日常

を鳴らしたいと思います。

#=====対戦=====#
scene 'game' do
  #変数定義
  bg_sprite = nil #背景
  mesh_sprite = nil #マス
  mark_sprite = nil #〇
  disposition_text_sprite = nil
  board_data = nil #盤面情報
  comparison_board_data = nil #盤面変化判定用配列
  turn = nil #ターン
  decision = nil #勝敗判定実行判定用

  ##### ↓追加分↓  #####
  main_music = 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
    image '〇画像', id: 202007
    image '×画像', id: 202014

    ##### ↓追加分↓  #####
    #音楽素材読込み
    music 'メイン音楽', id: 203732
    ##### ↑追加分↑  #####
  end

  create do
    #変数設定
    board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×
    comparison_board_data = board_data.dup #盤面変化判定用配列
    turn = 0 #ターン
    decision = 0 #勝敗判定実行判定用

    #背景画像配置
    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

    ##### ↓追加分↓  #####
    #音楽作成
    main_music = add_music('メイン音楽')
    #再生
    main_music.play
    ##### ↑追加分↑  #####

    #背景アニメ開始
    bg_sprite.start_animation('通常アニメ')
  end
#後略

タイトル画面に戻るときも音楽を止めます。
場所はupdateの最後あたりです。

#前略
    else
      ####勝敗判定####
      disposition = win_or_loss(board_data)

      if disposition != 0
        #終了処理
        wait_time(100)
        disposition_text_sprite = put_text '決着' do
          position screen_width / 2, screen_high / 2
        end
        disposition_text_sprite.bold true

        case disposition
        when 1
          disposition_text_sprite.color '#FF0000'
          disposition_text_sprite.text '勝利！'
          #クリア処理
          wait_time(2000)

          ##### ↓追加分↓  #####
          #音楽停止
          main_music.stop
          ##### ↑追加分↑  #####

          game_clear
        when 2
          disposition_text_sprite.color '#0000FF'
          disposition_text_sprite.text '敗北'
        when 3
          disposition_text_sprite.color '#00FF00'
          disposition_text_sprite.text '引き分け'
        end
        wait_time(2000)

        ##### ↓追加分↓  #####
        #音楽停止
        main_music.stop
        ##### ↑追加分↑  #####

        #シーン「menu」の開始
        change_scene 'menu'
      end

      decision += 1
    end
  end
#後略

音楽は以上です。

次は効果音を鳴らしましょう！
まずは「〇」,「×」を置いた時の効果音です。

効果音

選択音1

↑を使おうと思います。

#=====対戦=====#
scene 'game' do
  #変数定義
  bg_sprite = nil #背景
  mesh_sprite = nil #マス
  mark_sprite = nil #〇
  disposition_text_sprite = nil
  board_data = nil #盤面情報
  comparison_board_data = nil #盤面変化判定用配列
  turn = nil #ターン
  decision = nil #勝敗判定実行判定用
  main_music = nil #音楽

  ##### ↓追加分↓  #####
  locate_sound = 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
    image '〇画像', id: 202007
    image '×画像', id: 202014

    #音楽素材読込み
    music 'メイン音楽', id: 203732

    ##### ↓追加分↓  #####
    #効果音素材読込み
    sound '配置音', id: 320507
    ##### ↑追加分↑  #####
  end

  create do
    #変数設定
    board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×
    comparison_board_data = board_data.dup #盤面変化判定用配列
    turn = 0 #ターン
    decision = 0 #勝敗判定実行判定用

    #背景画像配置
    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

    #音楽作成
    main_music = add_music('メイン音楽')

    ##### ↓追加分↓  #####
    #効果音作成
    locate_sound = add_sound('配置音')
    ##### ↑追加分↑  #####

    #音楽再生
    main_music.play

    #背景アニメ開始
    bg_sprite.start_animation('通常アニメ')
  end

では再生させましょう。

#前略
  render do
    if board_data != comparison_board_data #ターン開始前と現在の盤面が違っていたら
      #違うところを探す
      9.times do |i| #9回ループ
        if board_data[i] != comparison_board_data[i]
          mark = board_data[i] == 1 ? '〇' : '×'

          #〇×配置
          mark_sprite = put_sprite mark 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

          ##### ↓追加分↓  #####
          #配置音再生
          locate_sound.play
          ##### ↑追加分↑  #####
        end
      end
    end
  end
end
#後略

はい、続いては決着がついた時のファンファーレです。
勝った時は

効果音

ファンファーレ MSX

負けた時、引き分けの時は

効果音

Jingle_Gameover_001

を使います。

では先ほどと同じように……

#=====対戦=====#
scene 'game' do
  #変数定義
  bg_sprite = nil #背景
  mesh_sprite = nil #マス
  mark_sprite = nil #〇
  disposition_text_sprite = nil
  board_data = nil #盤面情報
  comparison_board_data = nil #盤面変化判定用配列
  turn = nil #ターン
  decision = nil #勝敗判定実行判定用
  main_music = nil #音楽
  locate_sound = nil #配置効果音

  ##### ↓追加分↓  #####
  win_sound = nil #勝利効果音
  lose_sound = 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
    image '〇画像', id: 202007
    image '×画像', id: 202014

    #音楽素材読込み
    music 'メイン音楽', id: 203732

    #効果音素材読込み
    sound '配置音', id: 320507

    ##### ↓追加分↓  #####
    sound '勝利音', id: 120679
    sound '敗北音', id: 180251
    ##### ↑追加分↑  #####
  end

  create do
    #変数設定
    board_data = [0,0,0,0,0,0,0,0,0] #盤面情報 0:空白 1:〇 -1:×
    comparison_board_data = board_data.dup #盤面変化判定用配列
    turn = 0 #ターン
    decision = 0 #勝敗判定実行判定用

    #背景画像配置
    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

    #音楽作成
    main_music = add_music('メイン音楽')

    #効果音作成
    locate_sound = add_sound('配置音')

    ##### ↓追加分↓  #####
    win_sound = add_sound('勝利音')
    lose_sound = add_sound('敗北音')
    ##### ↑追加分↑  #####

    #音楽再生
    main_music.play

    #背景アニメ開始
    bg_sprite.start_animation('通常アニメ')
  end
#後略

準備が出来たので鳴らします。
updateの最後の方です。

#前略
    else
      ####勝敗判定####
      disposition = win_or_loss(board_data)

      if disposition != 0
        #終了処理
        wait_time(100)
        disposition_text_sprite = put_text '決着' do
          position screen_width / 2, screen_high / 2
        end
        disposition_text_sprite.bold true

        case disposition
        when 1
          disposition_text_sprite.color '#FF0000'
          disposition_text_sprite.text '勝利！'
          #クリア処理

          ##### ↓変更分↓  #####
          #音楽停止
          main_music.stop
          #勝利音再生
          win_sound.play
          wait_time(2000)
          #アクティビティフィード
          send_activity_feed("勝利しました！")
          game_clear
          wait_time(100)
          ##### ↑変更分↑  #####

        when 2
          disposition_text_sprite.color '#0000FF'
          disposition_text_sprite.text '敗北'
        when 3
          disposition_text_sprite.color '#00FF00'
          disposition_text_sprite.text '引き分け'
        end

        ##### ↓変更分↓  #####
        #音楽停止
        main_music.stop
        #敗北音再生
        lose_sound.play
        wait_time(6000)
        ##### ↑変更分↑  #####

        #シーン「menu」の開始
        change_scene 'menu'
      end

      decision += 1
    end
  end
#後略

なぜgame_clearの後にwait_timeがあるかですって？

……何故かクリアした後に敗北音が再生されるからです。

三目並べはこれで完成です。お疲れさまでした！

あとやることといえばエンディング画面の設定とかでしょうか？
これはCoRもRmakeもやり方は同じです。

一応私は

一枚絵

汎用_ゲームクリア画像

を登録しました。

あーそうそう、敵のAIのランダム選択のところ、無限ループ対策で100ミリ秒の時間待ち入れてましたが、もう不要なので消してください。

#前略
        #ランダム選択
        if result == nil
          while(board_data[result = rand(9)] != 0) do
          end
        end
#後略

では『三目並べを作る』はこれにて終了です。有難うございました！

CoR講座自体は期間はあきますが、もう少し続けようと思います。

それでは、さようなら～

【CoR講座用】三目並べ - Code on Rmake

次回→未定

コメントする

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

コメント一覧

ミカエル(投稿日：2017/07/02 19:22, 履歴)

既存の2DアクションRPGから卒業できず、
まだまだCoRに至るまで道のりは遠そうですが、
少しづつ学んでいきたいと思います。
ありがとうございました、そしてお疲れ様でした。

光楼（114）(投稿日：2017/07/04 15:41, 履歴)

おつありです。
頑張ってください～

aoihikawa(投稿日：2017/07/02 18:36, 履歴)

一通りの完成まで、
おつかれさまです

光楼（114）(投稿日：2017/07/02 19:09, 履歴)

おつありです～