【はじプロ】Alice's Magic Book Adventureができるまで

# Alice's Magic Book Adventureとは？
Nintendo Switch用ソフト「はじめてゲームプログラミング」で気が向いた時にゲームを作って投稿しているUまです。これまで色々なゲームを投稿してきましたが、その中でも最高傑作だと思っているゲームが「Alice's Magic Book Adventure」です。
![title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/6f7da6ba-c549-458b-c4d8-4b254289737d.png)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">構想から約2ヶ月。ようやく完成しました！<br>本のページをめくってステージの地形を変えながらゴールを目指すパズルアクションゲーム「Alice&#39;s Magic Book Adventure」<br><br>ゲームID:G 008 1VD 7V8<br><br>感想お待ちしております！<a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> <a href="https://twitter.com/hashtag/GameBuilderGarage?src=hash&amp;ref_src=twsrc%5Etfw">#GameBuilderGarage</a> <a href="https://t.co/P0HrbDKX5R">pic.twitter.com/P0HrbDKX5R</a></p>&mdash; Uま (@UMAtgv) <a href="https://twitter.com/UMAtgv/status/1454644677202771970?ref_src=twsrc%5Etfw">October 31, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ページを切り替えて地形を変化させてゴールの旗を目指すパズルアクションゲームとなっています。
遊んでいただいた方からもたくさん好評をいただいた作品です。今回は、このゲームができるまで・こだわった所を書いていきたいと思います。
なお、私はゲーム会社に入っていたわけでもなく、インディーゲームを作ったことがあるわけでもないゲーム作るのが好きな素人です。

# 記事を読む前に
:::note alert
<font color="red">**本記事には、エンディングまでクリアしているという前提で執筆されているので、ネタバレをめちゃくちゃ含みます！
パズルアクションという性質上、先に読んでしまうと楽しさが半減してしまうので、自分で遊んでから読むことをお勧めします。**</font>
:::

>ゲームID:G 008 1VD 7V8
>プログラマーID:P 002 LRK DBR

ゲームIDは記事公開時点でのIDです。存在しない場合はプログラマーIDから探してみてください
　
　
　
　


　
　
　

↓それでは記事スタートです。
# 1.構想
## 1.1 アクションゲームを作りたい・・・
はじプロは物理演算が最初から搭載されており、ヒトノードンを使えば簡単にアクションゲームを作ることができます。
しかし、これまでゴールを目指すマリオのようなアクションゲームを自分は作ってきませんでした。理由は、ノードン上限によるボリューム不足です。マリオのようなアクションゲームはたくさんのコースをテンポ良くクリアして楽しみます。しかし、はじプロはノードン設置の上限によりたくさんのコースを作るのは難しいです。(複数ゲームを連結すれば話は別ですが・・・)
長く遊べるアクションゲームを作るのは難しく、これまでエンドレスゲームや問題数を比較的簡単に増やせるパズルのようなゲームを作って長く遊べるようなゲームを作ってきました。
そんな中、この2つの作品に出会いました。

「PUZZMETRO」と「ツキサス」です。

**探索×パズル　PUZZMETRO**
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">できた。新作ゲームが。<br><br>広めのマップを探索してアイテム集めて行動範囲を広げていくメトロイドヴァニア系のゲームです。<br><br>120時間をかけて作った超大作で、事前に遊んでくれた方達からも評価高いです。PVだけでも見て。<br><br>ゲームID: G 002 KRR R6P<a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> <a href="https://twitter.com/hashtag/GameBuilderGarage?src=hash&amp;ref_src=twsrc%5Etfw">#GameBuilderGarage</a> <a href="https://t.co/KIpAGu4VoW">pic.twitter.com/KIpAGu4VoW</a></p>&mdash; ニカイドウレンジ (@R_Nikaido) <a href="https://twitter.com/R_Nikaido/status/1423599524967174144?ref_src=twsrc%5Etfw">August 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
「PUZZMETRO」はリンゴを探して集めて能力をパワーアップさせて、これまで取れなかったリンゴを集める・・・という敵がいないメトロイドヴァニア作品です。

**串刺しパズルアドベンチャー　−ツキサス-**
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/1847b24c-a522-79dc-0b5f-a6e6e0e641c1.png)
https://higepine.com/2021/09/串刺しパズルアドベンチャー%E3%80%80%E2%88%92ツキサス%E2%88%92/
「ツキサス」はブロックを突き刺して運んで、足場を作ったり飛んでくる弾を防いだりしてアイテムを集めていく作品です。

これらに共通するのが「パズルアクション」です。ステージが小さくてもプレイヤーにはどうやってクリアするか悩む時間が生まれ、結果的に長く遊べるゲームとなるのです。このジャンルなら作れるかも？となりゴールを目指すパズルアクションゲームを作ることになりました。
## 1.2 最初は絵本ではなく・・・
最初はこんな感じの構想でした。
![スライド7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/69404760-d516-3be3-64fb-cc2d3f6361c1.jpeg)
パソコンのウィンドウに地形があり、ウィンドウを移動させてゴールを目指すゲームです。しかし、これはプログラミングをするまでもなく没になりました。

* 自由度が高すぎてステージが思いつかなかった
パズルで自由度が高すぎると、プレイヤー側も無限の選択肢が生まれてしまい難易度が上がってしまいます。
* ウィンドウを動かすために連結するためにノードンがたくさん必要になる
地形用のモノノードンの他に、連結用のノードンがいるので必要となるノードン数が増えてしまいます。

そこで、地形を動かすのではなく切り替えていくゲームにすればこの2つが解決できるのでは？と思いました。
地形を作るノードンはモノを発射を使い、該当するページのモノを発射。ページを切り替えるときにワープで消しています。この仕組みで連結用ノードンは不要となりノードン数削減となりました。
![スライド3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/038a65b4-38ac-0c83-7fa2-e9b11f23fb7d.jpeg)
<iframe width="560" height="315" src="https://www.youtube.com/embed/VGRvPs4Y86E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
こうしてゲーム制作がスタートしました。
マリオが小さいドット絵で向きを分かりやすくするために帽子と髭がデザインされたように、最初から絵本モチーフではなく遊びの仕組みから作っていきました。

# 2.ステージ設計
## 2.1手書きのステージ
ゲームの内容が決まったところで早速プログラミング！ではなく、ノートに手書きでステージを作りました。まず、ゴールの仕方・ギミックを考えました。これが実際のスケッチです。![IMG_7537.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/6cff9658-1b9a-ea27-ce04-a54ee195fd7f.jpeg)
最初は後のことを考えずに、とにかく思いついたギミックを書いていきました。その後、他のギミックと共通して使うところは地形を修正しました。
![スライド10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/737f2b26-300c-5ad2-429d-4cd280991c07.jpeg)
これを元に絵本の中の地形を書きました。
![IMG_7536.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/e46ae66f-9c54-caa9-2a7c-2903ef7306fb.jpeg)

完成形と地形が違う場所がいくつかありますが、ノードンが足りなくなりそうだったのでプログラミングする時に省略したためです。
このノートを見ながらモノノードンを置いていきました。ステージを考える時は書いては消して･･･を繰り返すので、紙にえんぴつで書くのが良いと思いました。
## 2.2 12個のゴール
ここからはステージ設計でこだわったところを、それぞれのゴールと共に見ていきます。一応画像を載せていますが実際にプレイしながらだと分かりやすいかもです。
ちなみに全てのステージで壁キックをしなくてもクリアできるようにしています。マリオメーカーでも意識していたところですが、壁キックは、初心者にとっては意外と難しいアクションです。(自分も子供のころ壁キックができなくて詰んだことがあります)
### 本を開く![2022120500225200-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/adfe0aa9-1e68-f8d3-ab7f-a6e5b451b4c6.jpeg)
その前に、最初の絵本を開く場面から。この画面には絵本とタッチの説明だけしかありません。このゲームは旗を取ってクリアなのですが、ここでは書きません。遊び方を説明する時に、情報が多すぎるとプレイヤーは覚えられません。なので情報を小出しに与えるようにしてます。
### 1個目のゴール![2022120500231400-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/b87bda1d-8a8b-a3b4-6330-cc66d1a552fd.jpeg)
ここではアリスの操作・ゴールの条件をプレイヤーに覚えてもらいます。ゴールはジャンプしないと取れない場所にして、プレイヤーには絶対ジャンプしてもらうようにします。
### 2個目のゴール![2022120500232600-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/f1fef23f-bf01-517a-f2b6-077136a44e00.jpeg)
「別の絵本を開いて別の絵本に行く」ということをプレイヤーに覚えてもらいます。それ以外に迷う要素がないように、絵本を開けばゴールに1直線で行けるようにしています。
### 3個目のゴール![2022120500351100-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/5abc26d2-f8ed-ab8c-9f84-eccac68d77b2.jpeg)
「既存の絵本にページが追加されて、ページを切り替えて進む」ということをプレイヤーに覚えてもらいます。ここまでチュートリアルとして、丁寧に作りました。
文章での説明がなくてもここまで来ればプレイヤーはこのゲームで何をするのかを理解できると思います。このことで、「長い説明文を読む」という面倒なことを「自分で遊び方・ゴールを見つける」という楽しいことに変換できました。

### 4個目のゴール![2022120500241700-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/3aa94a87-799e-4d19-b59a-86a3141faf7c.jpeg)
3つ目のゴールの切り替えの応用問題です。
### 5個目のゴール![2022120500244700-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/663b6db3-2733-4997-f7fa-8f74053b6c27.jpeg)
球を使うステージです。球のチュートリアルステージ的な役割なので、追加されたページを開くだけでクリアできるようにしています。
### 6個目のゴール![2022120500340700-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/676d956f-5d88-2e27-9f25-f21f39038cd2.jpeg)
球を使うステージその2です。球を使って壁を破壊してゴールに向かうのですが、どうせならたくさん壊したい！と思ったので道中にも壁を置いてます。導線の役割も果たしてますね。本当はもっと置きたかったです笑
### 7個目のゴール![2022120500343200-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/a5428511-51c1-c8d4-6f75-f68cb57b0fad.jpeg)
炎を吐くタコのキャラの初登場。ここではブロックを壊してくれます。チュートリアルと同じで初登場なのであまり複雑なことはしなくて良いようにしてます。実は仮でタコのテクスチャにしていたのですが、良いキャラが思いつかず完成版でもそのままタコになりました笑
### 8個目のゴール![2022120500253800-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/b78177b1-503a-ca81-b041-847a32b3995d.jpeg)
さっきは壊してくれた味方だと思ったら今度は邪魔してくる敵に！？なステージです。どっちかというと、こっちがやりたくて前のゴールで前振りをしてました。
### 9個目のゴール![2022120500255300-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/ca82fed2-8368-0fde-4c11-33d1d67f21bc.jpeg)
ページを切り替えるだけでゴールできるステージですが、ここで大事なのは突如現れる謎の黒い壁の印象をプレイヤーに与える事です。この壁は最後のゴールへの伏線です。元々は最後のゴールの1個前にしていたのですが、すぐ勘付かれそうだったのでこの辺にしました。
### 10個目のゴール![2022120500263000-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/f3c18667-e64c-db62-f69b-53729520a567.jpeg)
導火線を繋げるステージ。左上の絵本の導火線のページは序盤のページですが、1枚のページを使い回すことでパズル的にも面白いしノードン節約になります。
### 11個目のゴール![2022120500264100-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/85e3ab52-7546-bb25-857c-43e4995b7a83.jpeg)
ボタンを押してから時間内にゴールまで行かないといけないステージ。1つ前のゴールを取った状態でページを切り替えなくても、ゴールへの道は繋がっていますが、絶対に時間内に間に合わないようにしてます。意図的に繋がっている状態を見せて、そこからプレイヤーを悩ませるようにしてます。![スライド4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/cacc1aa6-8cc0-e720-85e5-f311394d3c3c.jpeg)
### 12個目(ラスト)のゴール![2022120500273100-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/0a1dc08e-21ba-a966-8e9f-9805527f5633.jpeg)
4つの絵本を組み合わせて1つの大きなゴールを作るステージです。このラストのゴールはステージを作り始めの段階で作ろうとしていました。こういうメタ的な仕掛けが好きなのでプレイヤーを驚かせようと入れてみました。
モニターの「隠されたゴールを見つけ出せ！」の「ゴール」が文字ではなく、イラストにしています。ゴールの形が重要なので、いつでも確認できるようにしました。
# 3.世界観とテクスチャ
ステージ設計もこだわりましたが、テクスチャもこだわりました。
## 3.1 主人公のアリス
このゲームのストーリーは「不思議な絵本に閉じ込められた主人公が元々いた絵本に帰る」というものです。これを最初に説明できるほどのノードン数の余裕はないので、エンディングの演出で表現しました。結果的にプレイヤーは、クリアした時にこういうストーリーだったのか！と驚きポイントになったと思います。
![スライド9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/fabdcbce-da8d-ff2f-d4ba-fef24d865720.jpeg)
このストーリーなので主人公は童話のキャラクターにしようと思いました。いろんな童話の中から、不思議の国のアリスを題材にしたのは

* かわいい
* 原作が「不思議な世界に迷い込んだアリスが元の世界に戻る」というストーリーで今回のゲームのストーリーと似ている
* はじプロのナビつきレッスンにアリスがいる

一番最初の理由は置いておいて笑　このゲームにピッタリな題材だと思いました。
アリスのテクスチャは大変でしたが、苦労した分可愛いテクスチャが描けたと思います
![スライド1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/03cc6a5e-e532-10b1-469d-33d9ecfa11e4.jpeg)
ゲームプレイ中は上段の2枚のテクスチャしか使用していません。待機が左上、ジャンプ・下降が右上、この2枚を繰り返して歩行といった感じです。このモーションは「WITCHGIRL MagicalMadder」のテクスチャを参考にしました。<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ゲームID[ G 000 P4W H6K ]<br>※敵弾に背を向けるとダメージを受けないバグを修正。ゲーム内容自体は、以前投稿したものと同一です。 <a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> <a href="https://twitter.com/hashtag/NintendoSwitch?src=hash&amp;ref_src=twsrc%5Etfw">#NintendoSwitch</a> <a href="https://t.co/F0O2Bp2Q4H">pic.twitter.com/F0O2Bp2Q4H</a></p>&mdash; 離川星　紅（Sarah） (@rikawabosi) <a href="https://twitter.com/rikawabosi/status/1420726577051037697?ref_src=twsrc%5Etfw">July 29, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
また、テクスチャを描く時はこのゲームを作った方の動画を参考にしました。とても分かりやすいのでおすすめです。

https://www.nicovideo.jp/watch/sm39076381

## 3.2 4つの絵本の世界観
4つの絵本はそれぞれ世界観が異なります。
![スライド2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/eae75931-eec4-b234-fcdb-85c4cd4208cf.jpeg)
1冊目の絵本はノートの落書き風・2冊目の絵本はメルヘンな絵本風です。ここまでは本に描かれていてもおかしくないですが、ここから少し崩していきます。
3冊目の絵本は中世風。不思議の国のアリスの世界観には合ってるけど本に描いてあるイメージはない気がします。
そして、4冊目は本になってる訳がないし、童話のイメージにもあってないSF風です。
ゲームが進むにつれて童話の世界観や本からだんだん離れていくようにしました。遊んでくれた人からの感想でも、絵本によって違う世界観を評価してもらったのでこだわって良かったです。
# 4.反省点
たくさん好評をいただいたこの作品ですが、反省点もあります。中でも最後のエンディングに繋がる場面が特に不親切でした。

最後の旗を取った後、新しい本が出てきます。新しい本を開き、右に進めばエンディングとなります。
![できるまで.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956492/561829c2-6bc1-86d9-4f10-6b697b7f9ae4.jpeg)
しかし、遊んだ人の何人かはここで１回詰まってしまいました。理由は以下の通りです。

* いままで旗に触ればクリアだったが、何をすれば良いか全く提示されていない
* アリスが画面外にいる時もスティック入力を受け付けているが画面上何もアクションが起きない

これらの解決策としては
* これまでと同様に旗を設置する
* アリスが画面外にいる時は右に自動的に進み、画面内に映るようにする

などがありましたが、今回入れませんでした。プレイヤーは新しい本を開いたらそこに進むだろうと考えていたのもありますが、一番の理由はノードン数上限で入れる余裕がなかったからです。
しかし、結果として不親切な場面になってしまいました。はじプロユーザーのほとんどがノードン数上限が厳しいということは知っています。だからといって不親切な場面になった時に「ノードン上限が少ないからしょうがない」とはならないと思います。

**<font color="red">「プレイヤーへの配慮を最優先にする」</font>**

このゲーム制作を通じてこれを強く感じました。やりたい演出とプレイヤーへの配慮を天秤にかけたら、絶対にプレイヤーへの配慮。どっちもやりたいときは何としてでもノードン削減する。操作説明の仕方・ＵＩ・テクスチャ・演出などなど、プレイヤーへの配慮として考えることはたくさんあるので完璧にやるのはなかなか難しいですが、ゲーム制作するときには心掛けています。
# 5.終わりに
この作品が完成した後、何度か「第2のAlice's Magic Book Adventureを作ろう」とチャレンジしてみましたが、ここまでボリュームのあるゲームを作るのは自分はこれが限界かなぁと思っています。（大量に連結するのを除いて）過去の自分の作品を超えよう超えようと思ってしまい中々完成しない時期もありました。仕事でやっているわけではなく趣味でやっているので気楽に作るのが1番だなぁと思いました。
さて、こだわったところを書きまくったのですが、いかがだったでしょうか・・・　皆さんのゲーム制作の何かヒントになれたら幸いです。