DXRuby 講義資料　ロックマン



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

```rb: インデント例.rb
  if (条件A)
     #条件Aが真
     if (条件B)
        #条件Aが真　且つ　条件Bが真
     end
  elsif
     #条件Aが偽の場合
  end
```
4.　コードは正しい！なのに動かない！
    → 全角スペースが入っていませんか？
    全角スペースを可視化する方法
    https://jet-blog.com/vscode_zenkaku/


    
:::


## 学べる知識
- **マウスの座標利用**
- **スプライト画像　拡大　縮小**
- **フォント利用**

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

## 主な学習目的
ゲーム内でマウスを使用する方法を学ぶ。

```rb: 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
```

:::note info
**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の画像を半分に縮小する時のコードを書いてください


***


## 学べる知識
- **シーン制御**
- **画像の移動制御**
- **キーボード入力制御**
- **フォント利用**

## ゲーム内容
タイトル画面で　難易度を選択する

## 主な学習目的


```rb: 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
```

:::note info
##### シーン制御
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


:::



:::note info
##### キーボード制御
Dxruby では、
```rb: キーボード制御.rb
if Input.key_push?(キー定数) 
  #　キー定数が押されている間実行されるエリア
end
```
とすることで、キーボードを用いた操作が可能
詳しくは
リファレンス > 3.2 Inputモジュール 参照



:::

***

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

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


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

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

https://qiita.com/earth660/private/d64365b01e3a28f6a2f8



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

<details><summary>解答例を表示する</summary>

```rb: 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
```
</details>