Tools

GBゲームがすぐに作れる「GB studio」を使ってみた

投稿日:

 

 

どうも、田中です。さっそくですがドン!

スマホの方はこちら

 

このゲーム、上の画面から操作できちゃいます。

【操作方法】

・移動方法(←↑→↓、もしくはWASDキー)

・決定ボタン(Zキー)

 

しかも、ROMにしてGB実機(持ってる人いるだろうか)でも動かすことができるとのこと…

 

そんな事ができるGB Studioという無料ツールを使って友人からの協力を得て作ったのが上のサンプルです。

友人(

今回はGB Studioでどんな風にこのサンプルが作られ、このツールで何ができるのか、まとめてみました。

 

GB Studioの入手方法

GB Studioは無料のツールです。なのでここからDLしましょう。

→ダウンロード先(GB Studio

 

GB Studioのサイトは全英語ですが、Google翻訳だけでほとんど意味がわかります。

そして、本当に必要なことを記載してくれているので迷うこともありません。

 

WindowsとMacの場合で少々異なる点があるのでまとめておきます。

※田中はWindows PCしか持っていないので記事の内容はWindowsベースです。
 でも、殆ど同じだと思います。

Windowsの場合

Windowsの場合は殆ど意識することはありません。

 

ダウンロードした実行ファイルの指示通りにポチポチ進めましょう。

Cドライブ以外にインストールしたい場合などは、任意のフォルダを指示してインストールするくらいです。

 

Macの場合

Macの場合は私が殆ど使わないのでわかりませんが、若干Windowsよりも面倒な気がします。

詳しくはこちら

 

ゲーム作成方法

操作方法もシンプルです。

さっそく、田中が作った冒頭のゲームがどのように作られたかを元に手順を追っていきます。

 

プロジェクト作成

GB Studioを起動するとこのような画面が立ちがあります。

ここで選択できるのは

  • 新規作成(New)
  • 再開(Open)

だけです。こういうシンプルさがホント好き

 

Newのタブを選んだ状態で、以下を設定すればゲーム作成開始です。

  • プロジェクト名(Project Name)
  • テンプレート(Template)
  • 格納先(Path)

プロジェクト名は作成するゲームの管理フォルダみたいなものです。ただの箱ですね

格納先はその管理フォルダをどこに作るかってことです。

 

テンプレートは

この画像のように選択が可能です。

サンプルか、空っぽのプロジェクトが選択可能です。

最初はサンプルを選ぶことをおすすめします。

 

サンプルの中にはいくつかのキャラクター素材と背景素材が入っています。

どのようにすれば場面を切り替えられるのか、キャラクターを動かすにはどんなフォーマットで画像を準備するべきなのかがわかります。

ドキュメントと併せて読むことでGB Studioで実現可能なことの殆どは理解できるはずです。

 

素材準備

ゲームを作る素材は大きく分けて4つあります。

  • 背景(Backgrounds)
  • 音楽(Music)
  • スプライト(Sprites)
  • ユーザーインターフェース(UI)

なんとなくイメージが湧いているかもしれませんが、一応簡単な説明をすると

 

「背景」はその名の通り、マップなどの画像データです。

GB Studioで現在作成可能なゲームは見下ろし型の2Dゲームのみです。そのため背景=移動マップがしっくり来るかもしれません。

その他にはタイトルとして使いたい1枚のイラストなんかもこの「背景」に所属する画像になります。

タイトルは言わば、移動できないマップみたいな扱いになりますね

 

「音楽」はBGMです。田中が作ったサンプルにはBGMがありませんがGB StudioはシーンごとにBGMをつけることが可能です。

音楽ファイルをここに入れる感じですね

 

「スプライト」は直訳すると妖精らしいんですが、ゲームで言うとNPCなどのキャラクターや小さなオブジェクトになります。

サンプルデータの中には岩や女の子、男の子っぽいキャラクターのデータがここに入っています。

 

「ユーザーインターフェース」は見た目に関することが入っています。

見た目というとキャラクターも見た目に該当しないのか、と思われるかもしれませんがコレはもっとざっくりしたものです。

エモーションで利用する記号や文字のフォントなどをここに入れます。

たぶん、そこまでこだわりがなければ触らないで良い部分です。

 

ルート設定

驚くことに田中の作ったサンプルはシーンと呼ばれるモノが2つしかありません。

※シーンは「背景」にいれた画像イメージを利用することが出来るものです。

 

ただ、ルートは2つ設定しています。

  • シーン1の上部のゲートを通る
  • パラソルに話しかける

上記2つのいずれかのアクションをハリネズミくんが起こしたときにビーチに移動することができます。

そして友人()がキツイ制限の中頑張って書いてくれたドット絵を見ることができます。

 

何らかのアクションを持ってシーンを変更することでプレイヤーには別の場所に移動していることや

回想のように記憶を思い出したように見せているつもりです。

 

2つのアクションは違いますが、使ったスクリプトは同じです。

左上の赤枠のScene(シーン)というやつで「背景」に格納済みの画像から1枚選択して追加します。

その次に右下の赤枠の『Switch Scene』というスクリプトで場面の切替先に追加したシーン2を選択しているだけです。

 

スクリプトの名前もわかりやすく、直訳すれば『場面切替』です。

その名の通り、操作キャラクターが何らかのアクションを起こしたことをトリガーにシーンを変えてくれるってことですね

 

シーン(場面)を増やしてもこのスクリプトでシンプルに操作キャラクターを移動させてあげることができます。

2場面しか無いよりは、もっとたくさん移動できたほうが楽しいと思います。

 

シーンは「背景」に格納されている画像から追加することができるので、移動させたい分の画像が必要になります。

また、シーンの利用は重複することが可能です。

なので横に長い道などは1つの画像データを2.3回使うことで表現できるかもしれませんね

 

キャラクターの挙動設定

ゲーム作成画面の中にキャラクターとなるモノはざっくり分けて2種類です。

  • 操作キャラクター
  • NPCキャラクター

操作キャラクターは赤い再生ボタンのようなアイコンのところが初期表示位置になり、見た目の変更などが可能です。

ゲーム制作画面でいずれのシーンも選択せず(なにもないところをクリック)すると

赤枠内にあるような設定ができます。

 

シーンの中に存在する操作できないキャラクター(NPC)は、シーンへの要素追加で作成することができます。

シーンを選択し、左上のメニューから『+』を押して「Actor」を選択します。

そうすることでシーン上にNPCキャラクターが追加されます。

また、シーンを選択した際に右の赤枠のようにシーン内に存在するNPCキャラクターを一覧で確認できるようにもなっています。

 

動くキャラクターと動かないキャラクターの違い

キャラクターには動作するものと動作しないものがあります。

もう少し細かいことを言うと、上下左右を向くキャラクターと一定方向を見つめているキャラクターの違いです。

 

キャラクターを追加する際に見えてたかもしれませんが、よく見るとSpritesの中には2種類のファイルが存在します。

  • actor_animated
  • static

上が動けるキャラクターの画像で、下が動けないキャラクターの画像です。

動ける動けないの判断は画像ファイルのフォーマットに左右されます。

ハリネズミくんのサンプルだと動けないキャラクターはパラソルなどになります。

これはドット絵が1枚(1方向)のみの画像ファイルだからです。このときにstatic(静的)と判断されます。

 

動的なアニメーションが出来る画像と判断されるのはこんな感じのフォーマットの画像です。

左がないじゃないか、と思われるかもしれないですがコレが仕様です。

右向きを逆にすれば左向きになりますしね

 

ちなみに静的(1方向しか向けない)な画像のキャラクターでも移動はできます。

ただ、どの方向に移動しても振り向くことはありません。

最初のドラクエの勇者のような移動になりますね

 

ツールは説明書を読めばだいたいイケる

ツールの殆どは「やりたいことがほぼ出来る」から使うものだと思います。

逆に言えば、できないことも決まってる。ってことです。

 

今回のGB Studioは出来ることが実にシンプルです。

なのでちょっとドキュメントを読みましょう。

もしかしたらこの記事よりも文字数は少ないかもしれないです。

GB Studio Documentation

 

ゲーム制作の保存と再開方法

製作中のゲームは殆どのドキュメント系サービス、およびソフトと同じく Ctrl + S で保存することが可能です。

保存したプロジェクトを再開する場合は起動画面の「Open」を選択します。

 

すると上記のようにファイル選択ウインドウが表示されます。

ウインドウが表示されたときにプロジェクト名のフォルダが選択されていない場合は探しましょう。

 

プロジェクト名のフォルダを見つけたらproject.jsonを選択して「開く」を押します。

そうすれば以前の保存状態からゲーム制作を再開することができますよ

動作確認方法

サンプルなどを利用するとあっという間にゲームが完成します。

それを動かす方法も簡単すぎてびっくりします。

 

画像右上の再生ボタンのようなアイコンを押します。

するとこのようにPC上でエミュレートしてくれます。

本当に優秀すぎる無料ツールです。

基本的な動作方法は以下の通りで動かすことができます。

【操作方法】

・移動方法(←↑→↓、もしくはWASDキー)

・決定ボタン(Zキー)

 

ビルド方法

さて、作ったゲームを遊んでもらいたいって時には何をするかの話です。

遊んでもらえるようにすることをビルドするなんて言います。

ビルドすると実行できるような形式のファイルになり、人に渡したりweb上に公開することで触ってもらえるようになります。

 

GB Studioには2つのビルド方法があります。

 

webに公開するためのビルド

左上にあるドアっぽい(田中にはそう見える)アイコンを押して表示された選択肢の『Export Web』を選択しましょう。

そうすると任意のフォルダにwebに公開するために必要なファイルが自動で作れれます。

いたせりつくせりってやつですね

 

こんな感じのファイルが作成されるので、あとはwebサーバに入れてあげましょう。

アクセスできるようにすれば田中達が作ったサンプルのように動いて操作してもらうことが可能です。

 

ROMとして実行するためのビルド

左上にあるドアっぽい(田中にはそう見える)アイコンを押して表示された選択肢の『Export ROM』を選択しましょう。

田中は詳しいことがわかりませんが、ROMとして動かすために必要なファイルができてるっぽいです。

 

こんな感じです。

機会があったらエミュレータで動かす方法を勉強してみようと思います。

 

おすすめは…webかな

冒頭でもぼそっと書いてますが、実機もしくは実機相当の環境を今の時代でどのくらい持っている人があるんだろうか

っていうことです。

 

なのでwebでの公開のほうが需要高さそうだなと思います。

今は簡単なホスティングサービスもある(今回、田中が利用しているのは無料のやつ)ので別記事で解説します。

 

GB Studioをつかってみて

使ってみて思ったところは、

『操作が簡単、殆どプログラミング知らなくても動かせる』

です。

 

田中の感覚ですが、パワポのようなスライドを作ったことがあれば、なんとなくで動作部分は作れます。

個人でやるなら素材を作るほうが圧倒的に大変です。

 

色の制限、サイズの制限、決められたフォーマット。。。などなどあります。

そのへんも引っ包めてGame Boyって感じがして私(私達)は好きでしたが、好みは分かれそうだなという感じです。

 

P.S

スマホで動かすとゲームボーイぽいUIもデフォで作ってくれるのがスキ

-Tools
-, , , ,

Copyright© おっどじょぶマン田中 , 2019 All Rights Reserved.