エラーが出て詰まったら読む

起動しても即ウインドウが閉じられる。
→ 素材のパスは正しいですか？
undefined local variable or method '変数名'と表示される
→ 変数宣言しましたか？変数名は間違っていませんか？
　
syntax error, unexpected end-of-input, expecting Keyword_end(SyntaxError)と表示される
　→ endが足りない時に発生します。
end が必要な構文を確認してください。
インデント（字下げ）を用いて対となる構文の
対応関係をわかりやすくしていきましょう。
例)

インデント例.rb

  if (条件A)
     #条件Aが真
     if (条件B)
        #条件Aが真　且つ　条件Bが真
     end
  elsif
     #条件Aが偽の場合
  end

4.　コードは正しい！なのに動かない！
→ 全角スペースが入っていませんか？
全角スペースを可視化する方法
https://jet-blog.com/vscode_zenkaku/

学べる知識

マウスの座標利用
スプライト画像　拡大　縮小
フォント利用

ゲーム内容

マウスに追従するコーラを、　a4wの画像の手元に運ぶと　
コーラを持った a4wの画像に切り替わる。

主な学習目的

ゲーム内でマウスを使用する方法を学ぶ。

a4w_take_cola.rb

# coding: utf-8
require 'dxruby'
x = 300
y = 100

Window.bgcolor= [255,255,255]
image = Image.load("./image/cola.jpg")

# Sprite.new とはゲーム上でキャラクタを扱う為に使用するメソッドで、
# このメソッドによって作られたデータを使うことで、
# キャラクタの位置の変更や衝突の判定を簡単に行うことが出来る
font20 = Font.new(20)
cola_sprite = Sprite.new(200, 200, image)


# image_a4w_1 という変数に　画像　（./image/a4w_1.png）　をいれる
image_a4w_1 = Image.load("./image/a4w_1.png")
# image_a4w_2 という変数に　画像　（./image/a4w_2.png）　をいれる
image_a4w_2 = Image.load("./image/a4w_2.png")


a4w_sprite = Sprite.new(200, 200, image_a4w_2)

# ここから描画
Window.loop do

  mouse_x = Input.mouse_pos_x # マウスカーソルのx座標をmouse_xに格納
  mouse_y = Input.mouse_pos_y # マウスカーソルのy座標をmouse_yに格納
  
  cola_sprite.x = mouse_x # cola_spriteのX座標に mouse_x を格納
  cola_sprite.y = mouse_y # colaspriteのy座標に mouse_y を格納


  Window.drawFont(100, 300, "座標 #{mouse_x}:#{mouse_y}", font20)

  # コーラのスプライト画像であるcola_sprite の　x座標が 200～255　且つ　y座標が 200～255　の場合に、
  # コーラを持ったa4w の画像である　image_a4w_1 を、a4w_sprite変数に格納
  if (cola_sprite.x >= 200 && cola_sprite.x <= 255) && (cola_sprite.y >= 200 && cola_sprite.y <= 255)
    a4w_sprite = Sprite.new(200, 200, image_a4w_1)
  else  # そうでなければ、なにも持っていないa4w の画像である　image_a4w_2 を、a4w_sprite変数に格納
    a4w_sprite = Sprite.new(200, 200, image_a4w_2)
  end

 # Sprite.draw メソッドを使うと指定した Sprite データを画面に表示 (描画) することが出来る
  Sprite.draw(cola_sprite)
  Sprite.draw(a4w_sprite)
end

HOWtoUSE マウス制御 コード31-35行目

mouse_x = Input.mouse_pos_x # マウスカーソルのx座標をmouse_xに格納
mouse_y = Input.mouse_pos_y # マウスカーソルのy座標をmouse_yに格納

cola_sprite.x = mouse_x # cola_spriteのX座標に mouse_x を格納
cola_sprite.y = mouse_y # colaspriteのy座標に mouse_y を格納

課題

1. 画像(sample.png)をDXRubyで使用したい場合に

画像読み込みするためのコード
Spriteデータに処理するコード
Window.loop do ~ end内で画像を描画するコード
を書いてください

2. Q1の画像を半分に縮小する時のコードを書いてください

学べる知識

シーン制御
画像の移動制御
キーボード入力制御
フォント利用

ゲーム内容

タイトル画面で　難易度を選択する

主な学習目的

rkman_1.rb

# -*- coding:utf-8 -*- 
require 'dxruby'

#スタート画面

    #難易度選択画面　カーソル画像の
    #初期位置を easy の位置にしたいので 200px
    cursor_x = 200 


#ウインドウサイズ
    Window.width = 800
    Window.height = 420

#画像を変数に格納
    start_load = Image.load("./images/start.png")
    cutman_load = Image.load("./images/icon.png")
    fireman_load = Image.load("./images/fireicon.png")
    airman_load = Image.load("./images/airicon.png")
    cursor_image = Image.load("./images/cursor.png")
    cursor = Sprite.new(cursor_x, 150,cursor_image)

    image_background = Image.load("./images/bluesky.png")
    bluesky = Sprite.new(0,0,image_background)
    image_backgroundf = Image.load("./images/volcano.png")
    volcano = Sprite.new(0,0,image_backgroundf)
    image_backgroundb = Image.load("./images/bill.png")
    bill = Sprite.new(0,0,image_backgroundb)     
    image_wind = Image.load("./images/airattack.png")
    wind = Sprite.new(800,340,image_wind)
    image_wind2 = Image.load("./images/airattack2.png")
    wind2 = Sprite.new(0,280,image_wind2)
    image_wind3 = Image.load("./images/airattack.png")
    wind3 = Sprite.new(0,360,image_wind)

    image_key = Image.load("./images/key.png")
    key = Sprite.new(200,50,image_key)

#使用するフォントサイズを変数に格納　Window.draw_font でサイズ指定する時に利用予定
font12 = Font.new(12)
font_start = Font.new(28)
font_over = Font.new(64)
font_clear = Font.new(64)
font_l = Font.new(18)
font_l2 = Font.new(18)
font_message1 = Font.new(32)
font_message2 = Font.new(32)

text = "チュートリアルを選択してください"
scene = "start"
Window.loop do
  case scene
  when "start"
    # 課題2のコード
    # 矢印キーでカーソルを動かせるようにしてください。
    # その際、画面外からカーソルがはみ出ないようにしてください
        
    # 課題3のコード
    # カーソルをeasyに指定してある状態で
    # enterキーを押下するとeasyシーンに切り替わるように
    # コードを追加してください
        
        Window.draw(0, 0,start_load)
        Window.draw(200, 150,cutman_load)
        Window.draw(400, 150,fireman_load)
        Window.draw(600, 150,airman_load)
        Window.draw_font(200, 330, "#{text}", font_start)
        Sprite.draw(cursor)    

    # 課題1のコード
    # シーン変数に文字列"easy"を格納してください。
    # シーンがeasyの場合に背景画像(変数bill), 
    # 操作説明画像(変数key)を表示させてください。
        if Input.key_push?(K_ESCAPE)
            scene = "start"
        end
    end
end

シーン制御

Rubyのcaseを利用すればシーン制御も可能です。
Rubyのcase構文は対象となる変更の中身に応じて
実行されるエリアを切り替えることができるものです。

case 任意の変数
when Hoge
　任意の変数が Hoge であるときに実行されるエリア
when Fuga
　任意の変数が Fuga であるときに実行されるエリア
when ...
.
.
.
end

【コード解説】
今回のコードでは51行目以降にcaseを使っています。
sceneという変数を予め用意しており、 sceneに格納されている文字列を
"start" -> "easy" と書き換えていくことで、実行されるエリアを切り替え、描画される画像や文字を変更しています。

case の詳しい使い方はリファレンス参照

https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html#case

キーボード制御

Dxruby では、

キーボード制御.rb

if Input.key_push?(キー定数) 
  #　キー定数が押されている間実行されるエリア
end

とすることで、キーボードを用いた操作が可能
詳しくは
リファレンス > 3.2 Inputモジュール参照

現状難易度はeasyに固定されており、
キーを押してもカーソルは動きません

課題1.

シーン変数に文字列"easy"を格納してください。
シーンがeasyの場合に画像を表示させてください。

課題2.

矢印キーでカーソルを動かせるようにしてください。その際、画面外からカーソルがはみ出ないようにしてください。

sprite移動については下記を参照

課題3.

カーソルをeasyに指定してある状態でenterキーを押下すると
easyシーンに切り替わるようにコードを追加してください。

解答例を表示する

rkman_1.rb

# 課題1　解答
when "easy"
Sprite.draw(bill)
Sprite.draw(key)

################

# 課題2　解答
if Input.key_push?(K_RIGHT)
  cursor.x += 200
  if cursor.x > 600
    cursor.x -= 200
  end
end
if Input.key_push?(K_LEFT)
  cursor.x -= 200
  if cursor.x < 200         
    cursor.x += 200
  end
end


##########

# 課題3 解答
if Input.key_push?(K_RETURN) && cursor.x == 200
  scene = "easy"
end