Outrun を作る - ...完成してしまいました

# はじめに

> This game is a homage to OutRun from SEGA. です。

なんと完成しました。

https://scratch.mit.edu/projects/1092360558

> 曲数が 5 曲に増えました。

[ここ](https://qiita.com/Kray-G/items/3f7aa278232043250f09) で言ったように、作っていく過程を記事にしようかと思っていたのですが、試行錯誤の連続で中々記事にできず、頑張っていたら完成してしまいました...。ただ、途中経過はそれなりに保存してあります。

作業ステップ的には 50 くらい保存してあり、リストするとなんとなく裏技チックなものの実装も見えてきたりします。長いので記事の最後に保存リストだけ載せておきます。

道路自体は割と最初の方で完成しており、例えば Step1～3 で既に道路を実現、Step4～6 ではカーブとオブジェクト、背景まで揃ってました。

#### 開発中画面 Step1 ～ Step3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/247b79b3-fd77-e918-0e69-c6b27aa30aa2.png)

> Step1 では道路の中央ラインをカーソルで動かせる（自動車の位置を変えるので、押した方向とは逆に動く）ようにして、Step2～3 でその周辺に道路を描画です。左の図では左キーを押したときのイメージ。

#### 開発中画面 Step4 ～ Step6

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/7be2a769-6941-a402-d4e4-16402d782e18.png)

> 上段が Step4 でカーブができてます。Step5 ～ 6 でオブジェクトを配置して、シュルシュルとスクロールするのを見るのは気持ちいい。

で、ここまではすんなり行ったものの、ここからが大変だった :sweat_drops: 。特に超たくさん絵を描いたょ...。

* 大量のオブジェクト画像用意
    * とにかく画像が多い... 描画用スプライトのコスチューム数が全部で 213 枚
    * 背景オブジェクトはステージごとに違うし、左右でも違う
    * 特にビルボードは左右同じにすると英文が反転するので別々で用意
    * アザーカーは 1 台につき 13 枚の見え方をフォロー
    * 自車もオープニングの 12 枚を除いて 26 枚も描いた
        * クラッシュした時の派手な回転アニメーション用など
    * 旗振り役の男の子のアニメーションで 14 枚
    * 自車のエフェクト用に 4 枚 x 5 種類で 20 枚

その他にも以下も割と大変だった。

* コース設定（アップダウンとかカーブとか）
    * カーブの緩急具合の調整
    * アップ中のブラインド時間が長すぎると運要素が強くなるので調整
    * タイムリミットの設定も短すぎるとゴールできないので調整
* アザーカーのアルゴリズム
    * まだちょっとおかしい、すり抜けるケースあり
    * 道路をはみ出してるケースも
    * これらは時間があったら直す

総じて言うと、**道路を実現するまでは簡単**、そのあと**実際に遊べるゲームに仕立て上げるのが超大変**ということですね。

> ちなみに、[この記事](https://qiita.com/Kray-G/items/58a1b26dc22132cc1bab)で書いた、OutRun を諦めて作った Time Trial On Edge ですが、頂いたコメントを読むと何気に好評なようです。バグが直せてないにもかかわらず...。

で、今回の Attractive Drivers は念願の OutRun。しかも完成度も高くなり、また違った面白さがあります。

# 本題

ということで、色々と頑張った完成品をたっぷりとご堪能ください。

# ゲーム紹介

## Attractive Drivers

https://scratch.mit.edu/projects/1092360558

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/efc750f1-70aa-69db-85fa-bada2fbff649.png)](https://scratch.mit.edu/projects/1092360558)

> **ご注意**
> 車のモデルはフェラーリ 296 GTS ですが、それっぽく描いただけで実在の団体等とは無関係です。本物の 296 GTS の最高時速は 330km/h らしいですが、本作ではオリジナル OutRun に敬意を表して 293km/h です。

### ストーリー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/b80f2ad8-a510-b9a2-54bb-9b9e697d3fe5.png)

> この島では、毎年「アトラクティブドライバーズ」というドライビング・レースが開催されています。今回、あなたは見事出場資格を獲得し、恋人と一緒にこの島の西海岸から東海岸まで一昼夜かけて走ります。さあ、山や砂漠を越えてゴールを目指しましょう！
> 
> ちなみに、今回のスタートフラッグを振る役は、地元の子どもたちに体験学習の場を提供する目的で企画されたもので、地元の小学校で公募した結果、10歳の男の子が選ばれました。

### オープニング

くるくると回るスポーツカーの下で START か OPTIONS を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/097da486-aa88-06c0-e9e8-fdd410de62bd.png)

> OutRun のネームエントリー画面がかっこよすぎて、ここに似たような絵を作って挿し込んだよ。エンディングでも使ってるけど。

オプションでは以下を選択可能。

|項目|選択肢|概要|
|:---:|:---:|:---|
|LEVEL|`Just Driving`|アザーカーの出現しないドライブモード|
||`Super Easy`|アザーカーにぶつかってもほとんど減速しない|
||`Easy`|アザーカーにぶつかっても少ししか減速しない|
||`Normal`|デフォルトの難易度|
||`Hard`|チェックポイントでの追加タイムが少し少ない|
||`Super Hard`|`Hard` に加えてアザーカーが多くなる|
|TRANSMISSION|`Automatic`|LOW/HI を自動で制御|
||`Manual`|LOW/HI を自分で制御、エンジンブレーキも可|
|METER|`km/h`, `mph`| km/h と mph の切り替え|
|VOLUME|0～10|BGM の音量|

### BGM の選曲

OutRun と言えば、BGM の選曲です。ただ、BGM Volume を 0 にした場合はこの画面自体をスキップします。操作画面的には今風にタッチパネルを想定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/43ef7606-b0d7-0363-2db5-80d362d7879e.png)

> 左右キーで選択して、Enter キーで決定。

全 5 曲です。Stage 1-4 用と Stage 5-8 用に、2 曲選びます。

* Beachside Driving
* Midnight City Blues
* Main Street Battle
* Summer Memories
* Beautiful Sunset Road

各曲の解説は [こちら](#曲紹介)。

### スタート

BGM を選択するとスタート画面です。向こうからスタートのポールが近づいてきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/365ef4ac-5db9-cd4d-021d-edbf4cf72ece.png)

カウントダウンが始まり、スタートフラッグが振られてスタートです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/27abd263-10f6-8c4e-be5c-1217b0add4e7.png)

> 実はここで、本物の OutRun では有名なあるイベントと同じようなモノを仕込んであります。興味があれば試してみてください！

また、（マニュアル操作の場合はギアを HI にした状態で）エンジンの回転数を緑と赤の境目くらいに調整しておくと、ロケットスタートできます。

> ギアガチャは無し。

### レッツ・ドライビン！

ここから先は時間との戦いです。アザーカーにも負けず、道路脇オブジェクトにも負けず、チェックポイントを目指します。ここからは画面イメージを贅沢に出してしまいますが、ここに出したものだけでなくもっと色々背景も移り変わっていくので、**ぜひプレイして確認してください**。

#### コースマップ

プレイでは最後に「どこまで進んだか」をコースマップとして表示するのですが、ここでは最初にこんな感じ、とマップを出しておきます。全 8 Stage あります。左端の Sunshine Beach から最後の Nostalgic Road を通ってゴールです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/e1fef84d-fc4a-f005-3607-0ebf8e28306a.png)

#### Stage 1 - Sunshine Beach

1 面は、ココナッツ・ビーチよろしく**サンシャイン・ビーチ**。OutRun の 1 面と言えばビーチ。開放感の中で走る爽快感。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/0f5ffadf-c391-29fc-5115-cdcc67fa258f.png)

> 開放感と爽快感。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/7cf3df04-eb6e-0d67-66a5-0e9db6163147.png)

> 普通に走ってたらこうなることはないんですが、無駄に波に接触するとバシャバシャとエフェクトがかかります。ただ、この波の処理などに忙しく（無駄だ）、フレームレートが低くなりがち... しかし、OutRun と言えば波打ち際を走るものなのです（嘘）... 処理速度的にはフレームレートが下がっても操作性が維持されるようにプログラムしてあるのと、2 面以降持ち直すのでご容赦。

制限時間内にチェックポイントを過ぎれば残りタイムが追加され次のステージへ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/8ce8d4b4-edd1-b57c-4576-7476c422be67.png)

#### Stage 2 - Gate Blocks

2 面は途中で巨大なゲートをくぐります。これも OutRun でお馴染みの光景を再現したくて作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/19ab5286-2e7e-2bca-fe63-41998152b464.png)

#### Stage 3 - Wild Mountain

3 面は夕焼けの美しい山道です。どこか寂し気であり、そこがまた美しくもあり。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/7b95dfea-0b90-2796-7add-9a594a2fa808.png)

#### Stage 4 - Big Ruins

4面の最初は崖に囲まれた道から始まります。その後、巨大遺跡が出現し、ここでもまた巨大なゲートが登場です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/37b28c97-fe02-a69e-ca85-5a30dced86eb.png)

もちろん、接触したらクラッシュです。派手に吹っ飛びます。が、車から落ちることもなくドライブ再開です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/2d054fa2-32a7-92a6-1229-c7a68f7a9f2b.png)

> 「キャー」という叫び声が... しかし、二人とも無傷です。

#### Stage 5 - Lakeside Town

5 面はマジックアワーと呼ばれる、空一面の紫からオレンジへのグラデーションが美しい面。OutRun の中で最も美しい（と勝手に思っている）オールド・キャピタルの哀愁漂う雰囲気を再現したくて作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/09384d70-ab6a-6e43-704f-901925313a7b.png)

#### Stage 6 - Aqua City

6 面は、夜の街を疾走します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/87f6779a-88d5-7f2d-ebac-67fdbf00f007.png)

> 街灯のともる道を進むと遠くに街並みが見え、ビルボードが出現し、そのうちビルに囲まれた街に入っていきます。

この面の後半は次の砂漠への入り口です。空が暗くなり、街灯がだんだんと減っていき、明け方付近で最後の舗装道路が無くなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/828e95e3-cccd-0b2f-c3c7-8da40c5234df.png)

#### Stage 7 - Desert Hill

7 面は空が明るくなり、早朝の砂漠に突入です。特に上り坂では道路が良く見えないので、アザーカーの向きや進行方向を頼りに進んでいきます。砂にタイヤを取られると減速するのですが、半分くらい仕方ない面です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/00ae0ee5-4331-9a6b-756c-cc8ff07dba85.png)

> 高級スポーツカーで砂漠を爆走。

#### Stage 8 - Nostalgic Road

8 面は荒野を抜けて海岸に向かいます。あまり大した面でもないですが、全部画面イメージをバラすのも味がないので、この面だけ載せないでおきます。ぜひぜひプレイして見てみてください。

#### Goal

最後の面は見せないと言っときながら、ゴールは載せてしまってますが、ゴールすると残り時間に応じてボーナスポイントが入ります。スコアやボーナスポイントはレベル（難易度）に応じて異なります。ここではノーマルなので 50,000 Pts/s ですが、Hard で 100,000 Pts/s、Super Hard なら 1,000,000 Pts/s です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/ceea1c21-2819-059c-17e2-b3c10d20aa9d.png)

最後は車を止め、エンジンを切って車を降ります。そして、コースマップを表示してエンディング（と言っても静止画）です。大した画面ではないですが、例の OutRun のネームエントリー風の味のある画像に、スコアとトータル・ラップタイムを表示します。こちらはぜひプレイして見てくださいませ。

#### Game Over

ちなみに、ゴールせずゲームオーバーになった際の画面はこちら。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579271/86e4af80-e6ef-f40f-5f6e-b452bd51110b.png)

> 最初から一歩も動かずに表示させたので、スコアはゼロですが。一人膝を抱えて悲しみの中です。

# 中の説明

## 曲紹介

いつもの通り、曲紹介です。今回のは曲（と絵）中心だったので、大変でしたが、曲の方は割と早めに作っておいたので何とかなりました。絵がヤバかった。

### Easy Going

* オープニングなので派手なイメージ
* そんなに長く聞くモノではないので短めで
* こんな感じで、とイメージを出して速攻で完成させた曲

### Beachside Driving

* タイトルを先に決めて、それに合わせて作りました
* OutRun と言えばビーチサイド
* ビーチサイドに似合う曲を作りたかったのです
* 割といい感じにビーチサイドでドライブ気分です

### Midnight City Blues

* 6 面の夜の街をイメージ
* なので、1 面にはちょっと似合わないかなぁ
* 渋い感じでピアノ中心に
* 実はベースラインも少し凝ってたりします

### Main Street Battle

* こちらはハードロックで疾走感を表現
* この曲をかけたときは、ドライブというよりレースになる
* 超スピードで走り抜けるのに最適
* ちょっとベタな感じですが、個人的には気に入っています
* 1 面で流しても割と合う

### Summer Memories

* 明るめの曲が Beachside Driving しかないので、急遽作ってみました
* ラテンな明るい曲を追加したいと思い、ルンバのリズムですかね
* あまり曲展開もないので短いのですが、軽快なノリで行きたい場合にピッタリです

### Beautiful Sunset Road

* OutRun なので、サンバのリズムで 1 曲作りたかった
* Magical Sound Shower と Passing Breeze を足して 2 で割った感じを狙って
* の、つもりでしたがなんか全然違う感じ？
* 何気に自画自賛ですが、超カッコ良くなった
* 特にピアノ、最後の終わり方がシビレル、自分が作ったんじゃないみたい
* ループしないバージョンでは、このピアノのフレーズでシュッと終わります

### It's Your Time

* コースマップ～エンディングのテーマ
* OutRun のネームエントリーは Last Wave という静かな曲なのですが、真逆にしてみた
* ゴールした後の高揚感を維持させたかった、という理由です

曲だけ聞きたい、という方は「中を見る」で曲ごとに再生させることも可能ですが、以下にも収録してあります。ぜひ！

* **G14-Jerrydog Music Vol.2**

https://scratch.mit.edu/projects/1070391103/

# ご参考

開発中の保存リスト。

```
Attractive Drivers 01 - Road Center
Attractive Drivers 02 - Straight Way
Attractive Drivers 03 - Straight Way w/ Line
Attractive Drivers 04 - Curve
Attractive Drivers 05 - Objects
Attractive Drivers 06 - Background
Attractive Drivers 07 - FPS
Attractive Drivers 08 - Title
Attractive Drivers 09 - Height
Attractive Drivers 10 - Divide LR
Attractive Drivers 11 - Center Object
Attractive Drivers 12 - Game Start
Attractive Drivers 13 - Course Variation
Attractive Drivers 14 - Width
Attractive Drivers 15 - Course Update
Attractive Drivers 16 - Check Point
Attractive Drivers 17 - Course Control
Attractive Drivers 18 - Start Staff
Attractive Drivers 19 - Divide Control Sprite
Attractive Drivers 20 - Object Interval
Attractive Drivers 21 - Thumbnail
Attractive Drivers 22 - Billboard
Attractive Drivers 23 - Stage 1, 2
Attractive Drivers 24 - Stage 3, 4
Attractive Drivers 25 - Add Objects
Attractive Drivers 26 - Night City
Attractive Drivers 27 - Desert
Attractive Drivers 28 - Update Beach
Attractive Drivers 29 - Driving Car
Attractive Drivers 30 - Other Cars
Attractive Drivers 31 - Course 8
Attractive Drivers 32 - Goal
Attractive Drivers 33 - Start
Attractive Drivers 34 - Title And Opening
Attractive Drivers 35 - Update Thumbnailsb3
Attractive Drivers 36 - Display Information
Attractive Drivers 37 - Game Over
Attractive Drivers 38 - Material Update
Attractive Drivers 39 - Extended Play
Attractive Drivers 40 - Start Flag
Attractive Drivers 41 - Goal Cheer
Attractive Drivers 42 - Transmission
Attractive Drivers 43 - Option Menu
Attractive Drivers 44 - Goal Bonus
Attractive Drivers 45 - Wave Effect
Attractive Drivers 46 - Rocket Start
Attractive Drivers 47 - Key Operation
Attractive Drivers 48 - Small Changes
Attractive Drivers 49 - Pause
Attractive Drivers 50 - Score When Passing Car
```