HSP3 ゲームのプログラミング
　レース・ゲーム制作 前へ 目次へ 次へ 

(4) トラック・コース

○ コース概要

　図のような、陸上競技のトラックのようなコースにすることを考える。Y座標340～480は、着順などの情報を表示する領域に使用する予定である。

・図のAがスタートとゴールとして、反時計方向に移動する。
・キャラクタは8台、コースを守って移動する。
・1着を予想するゲームとする。

　一番の問題は、このコース上をどのように移動させるかである。


○ コース描画

　コース全体の領域(0, 0)～(640,340)を塗りつぶしの四角形で描画する。色は緑(0, 255, 100)である。
　次に、トラックの外側を描画する。図のように2つの円と四角形で描画する。色は濃い緑(0, 128, 50)である。
　最後に、トラックの内側を描画する。外側と同じように2つの円と四角形で描画する。色は緑(0, 255, 100)である。


トラック外側　　　　　　　　　　　　　　　トラック内側

サンプルrace11.hsp
　コースを描画する。
　ゲームの処理は、①画面消去、②コース（背景）描画、③キャラクタ移動・描画を繰り返すことになるので、コース描画の処理をサブルーチンとして作成することにする。

;race11.hsp
    screen 0, 640, 480
    gosub *disp_course      ;コース描画
    stop
;------------------------------
; コース描画 -----
*disp_course
    color 0,255,100
    boxf 0, 0, 640, 340         ;領域全体
    color 0,128,50
    circle 0,0,340,340          ;外側の左側の円
    circle 300,0,640,340        ;外側の右側の円
    boxf 170,0,470,340          ;外側の四角形
    color 0,255,100
    circle 100,100,240,240      ;内側の左側の円
    circle 400,100,540,240      ;内側の右側の円
    boxf 170,100,470,240        ;内側の四角形
    return

実行コースが描画される。


(5) マス目とコース座標

　キャラクタのサイズは10ドットの正方形に収まるものとする。
　キャラクタは、図右のマス目を移動させるイメージで考える。キャラクタは8台を予定しているので、キャラクタそれぞれのマス目は配列car_xとcar_yで管理する。

    car_max = 8
    dim car_x, car_max
    dim car_y, car_max

　第1コースのキャラクタはcar_x(0) = 0, car_y(0) = 0、をスタートしてcar_x(0) = 131でゴールである。car_y(0)はコースを守って移動するので変化しない。

　図右のマス目座標はコースの座標から決定した。
　スタートからの直線（①の部分）はコースの座標から300ドット（ピクセル）で、移動量を10ドットとしてマス目を30(=300/10)とした。
　次の曲線（②の部分）は、内側と外側で距離（ドット数）が違うので、移動量として角度で設定する。ここでは、移動量を5度としたのでマス目は36(=180度/5度)となる。
　③の部分と④の部分は、それぞれ①の部分と②の部分と同じである。
　マス目とコースの対応が決まったところで、実際にマス目をコースの座標に変換する式を考える。

①の部分
マス目(n) X座標
0 470
1 460
2 450
… …
28 190
29 180
（マス目 0～29）
　マス目に対するX座標は表の通りである。マス目をnとして、Xをnの式で表すと次のようになる。

　　　　X = 470 - n * 10
コース番号(n) Y座標
1 90
2 80
3 70
… …
7 30
8 20
　コース番号に対するY座標は表の通りである。コース番号をnとして、Yをnの式で表すと次のようになる。

　　　　Y = 100 - n * 10
③の部分（マス目 66～95）
マス目(n) X座標
66 170
67 180
68 190
… …
94 450
95 460

　マス目に対するX座標は表の通りである。マス目をnとして、Xをnの式で表すと次のようになる。

　　　　X = 170 + (n - 66) * 10
コース番号(n) Y座標
1 250
2 260
3 270
… …
7 310
8 320
　コース番号に対するY座標は表の通りである。コース番号をnとして、Yをnの式で表すと次のようになる。

　　　　Y = 240 + n * 10


(6) マス目とコース座標（曲線部分）

　②の曲線部分は、コースごとに半径が違い、角度90度から270度までの部分である。
　角度と半径からコース上の座標を計算するには、三角関数を使って下図のように求める。

　図では角度を60分法で示してあるが、多くのプログラム言語では角度をラジアンで扱っている。

　ラジアンは、360度を2πで表す。2πとは半径1の円の円周である。

2π(ラジアン) = 360(度)
1(度) = π/180(ラジアン)

 

②の部分（角度 90～270）
マス目(n) 角度
30 90
31 95
32 100
… …
64 265
65 270
　マス目に対する角度は表の通りである。マス目をnとして、角度kをnの式で表すと次のようになる。

　　　　k = 90.0 + (n - 30) * 5.0
　角度kをラジアンradに変換する式は次の通りである。π=3.1415とする。
　　　　rad = k * 3.1415 / 180.0
コース番号(n) 半径(r)
1 80
2 90
3 100
… …
7 140
8 150
　コース番号に対する半径は表の通りである。コース番号をnとして、半径rをnの式で表すと次のようになる。

　　　　r = 70.0 + n * 10.0
　角度（ラジアン）と半径から座標x, yを計算する式は次の通りである。このときの円の中心座標は(170, 170)である。

　　　　x = 170.0 + r * cos(rad)
　　　　y = 170.0 - r * sin(rad)
④の部分（角度 270～450(90)）
マス目(n) 角度
96 270
96 265
98 260
… …
130 445(85)
131 450(90)
　マス目に対する角度は表の通りである。マス目をnとして、角度kをnの式で表すと次のようになる。

　　　　k = 270.0 + (n - 96) * 5.0
　角度kをラジアンradに変換する式は次の通りである。π=3.1415とする。
　　　　rad = k * 3.1415 / 180.0
コース番号(n) 半径(r)
1 80
2 90
3 100
… …
7 140
8 150
　コース番号に対する半径は表の通りである。コース番号をnとして、半径rをnの式で表すと次のようになる。

　　　　r = 70.0 + n * 10.0
　角度（ラジアン）と半径から座標x, yを計算する式は次の通りである。このときの円の中心座標は(470, 170)である。

　　　　x = 470.0 + r * cos(rad)
　　　　y = 170.0 - r * sin(rad)

サンプルrace12.hsp
　マス目をコース座標に変換する処理をサブルーチンとして作成する。マス目データを変数xとyに格納して、サブルーチンを呼び出すと同じ変数xとyにコース座標が格納されるようにする。

;race12.hsp
    screen 0, 640, 480
    car_max = 8         ;台数
    dim car_x, car_max      ;x座標
    dim car_y, car_max      ;y座標
    foreach car_y
        car_y(cnt) = cnt + 1    ;コース番号1-8
    loop
    repeat
        redraw 0
        gosub *disp_course      ;コース描画
        foreach car_x   ;台数分
            x = car_x(cnt) : y = car_y(cnt)
            gosub *xy_henkan        ;座標変換
            hsvcolor cnt * 20, 255, 255
            boxf x, y, x + 8, y + 8     ;キャラクタ描画
            car_x(cnt) += 1     ;移動量
            if car_x(cnt) > 131 : car_x(cnt) = 0
        loop
        redraw 1
        await 200
    loop
    stop
;-------------------------------
;座標変換 -----
*xy_henkan
    if x < 30 {         ;①の部分
        x = 470 - x * 10
        y = 100 - y * 10
        return
    }
    if x < 66 {         ;②の部分
        r = 70.0 + y * 10.0
        k = 90.0 + (x - 30) * 5.0
        rad = k * 3.1415 / 180.0
        x = 170.0 + r * cos(rad)
        y = 170.0 - r * sin(rad)
        return
    }
    if x < 96 {         ;③の部分
        x = 170 + (x - 66) * 10
        y = 240 + y * 10
        return
    }
    if x < 132 {        ;④の部分
        r = 70.0 + y * 10.0
        k = 270.0 + (x - 96) * 5.0
        rad = k * 3.1415 / 180.0
        x = 470.0 + r * cos(rad)
        y = 170.0 - r * sin(rad)
        return
    }
; コース描画 -----
*disp_course
＜＜　省　略　＞＞
        return

実行コース上を8台のキャラクタが並んで移動する。


　レース・ゲーム制作 前へ 目次へ 次へ 
2007 © Hiroshi Masuda 

 

 

inserted by FC2 system