好きなアプリゲーム

今回は、今までプレイしたアプリゲームの中で好きなデベロッパーさんをご紹介したいと思います。

ご存知の方も多いと思いますが、G.GEAR.INCさんです。

数々のヒットアプリを制作されていて尊敬するデベロッパーさんでもあります。

また、ゲームアプリといっても推理や謎解きから、独自のミニゲームまで、

何種類ものオリジナル作品を制作されていてすごいなと思います。

その数あるアプリの中で個人的なお気に入りを2つほどご紹介したいと思います。

 

1.「僕の彼女は浮気なんかしない」

G.GEAR.INCさんのアプリの中で一番初めにプレイしました。アイコンの女の子の表情から

飛び出すような強い視線を感じます(笑)こちらはストーリを読んで途中途中選択肢を選んで進んでいく

いわゆるノベルゲームですね。ストーリーに引き込まれるようにプレイし、一日でクリアしました。

とても面白いし、操作もわかりやすいのでゲーム初心者の方にもおススメです。まだプレイされて

いらっしゃらない方は、驚きの結末を、ぜひご自身の目で確かめてみてください♪

 

2.「バカサスペンス」

第一話が「トイレの○○○を流していないのは誰だ」というかなりおバカな推理ゲーム。それだけのネタならばすぐ

にアンストレベルですが、G.GEAR.INC作品のUIのクオリティの高さ、操作性の良さに引き込まれ、

画面のアイテムをなぜかタップしてシナリオを進めてしまいました。シナリオの進展もテンポがよく、

どんどん引き込まれて行くうちに気が付くとクリアしてしまいました。

しばらく放置していると広告画面が出てきます。ユーザーには気にならないタイミングとレベルのものなので、ゲームを制作する側としても勉強になります。

 

以上G.GEAR.INCさんの紹介でした。ちなみに、読み方は「じーじゃーいんく」ではなく!「グローバルギア」と読むそうです。最近まで間違えて前者で読んでいたので皆さんもお気をつけ下さい。

 

G.GEAR.INC公式サイト

https://global-gear.jp/

 

脱出ゲームを作ってみよう!8

前回はUIの設定として、画面がボタンで移り変わることを実装しました。

今回はゲームオブジェクトを画面に配置していきます。

まず大切なことから。

CameraにRaycaster2Dコンポーネントをつける

まず、二つのカメラ(MainCamera とCamera)にEvent→Physics2DRaycasterコンポーネントをつけてください。

ゲームオブジェクトのタッチ(クリック)検出はカメラにこのコンポーネントがつけてあることと、ゲームオブジェクトにコライダがついている必要があるんだよ♪

 

haikeiのorder in rayerを-1にする

背景画像のhaikei1をクリックしてください。インスペクタのOrder in Rayerを-1にしてください。これは、この後設置するゲームオブジェクトが背景に隠れないために、レイヤーの数字を少なくして背景を後ろにしています。

 

ゲームオブジェクトを設置する

Imagesフォルダからの画像をSceneにドラッグアンドドロップしてください。すると、ヒエラルキーに「connecta」などの画像の名前が設置されました。

(ドラッグアンドドロップができない場合は、その画像のインスペクタを確認して、Texture TypeがSprite「2D and UI」になっているか確認してください。

 

ゲームオブジェクトにコライダをつける

 

上の赤線で囲んであるように、各ゲームオブジェクトにBox Collider2Dをつけてください。

 

GameManagerを追加する

 

ヒエラルキー上で右クリック→Create Emptyよりゲームオブジェクトを作り、オブジェクト名を「GameManager」にしてください。このオブジェクトの名前は特に重要ではなく、hogeでもhageでも大丈夫です。

 

スクリプトGameManagerを作る

画面下のProjectのあたりにカーソルを合わせて、右クリック →Create→C#スクリプトを新規に作成します。スクリプトの名前は「GameManager」にしてください。


上記コードをコピペする

 

ヒエラルキー上のGameManagerにスクリプトGamemanagerをドラッグアンドドロップしてアタッチします。

 

そして、ゲームオブジェクトGameManagerをクリックすると、インスペクタにGameManager(Script)とあり、「None」となっている箇所があると思います。

そこに、各名前(Connecta には connecta)のゲームオブジェクトをアタッチしてください。

 

 

EventTriggerをゲームオブジェクトに設定する

ヒエラルキーからconnectaなどのドラッグアンドドロップしたゲームオブジェクトをクリックして、インスペクタからAddComponent→Event→EventTriggerコンポーネントを選択してください。Event Typeは「Pointer Click」にしてください。

 

下図のようにGameManagerを接続して、「+」ボタンより、GameManagerを選択して、「PushObjectConnecta」を選択してください。

 

動作確認

 

それでは実行してみましょう。

ゲームオブジェクトをクリックするとそのゲームオブジェクトが消えてなくなるはずです。

脱出ゲームの仕組みはこのように、ゲームオブジェクトを設置する→タッチするとゲームオブジェクトが消える関数を用いる ということを基本的なこととして行っています。

 

コネクタがタッチで消えた。

 

ほかのゲームオブジェクトも試してみましょう。

今回はここまでです。

みんなであそぼ~!

こんばんは!やっぴーだよ♪

ぼく、るいちゃんのその後が気になってそわそわするよ~!風のうわさなんだけど・・・あのね!

次のゲームが今月中に出るかもしれないんだって!

みんなもそれまでに1をクリアだよ~♪

 

やっぴーだよ♪

kuma

こんにちは♪ぼくはくまのやっぴー!まだ生まれたてだよ♪

おもしろいコトに興味があるよ!新しいゲームができたんだって。ボクにもできるかな?

kuma2

フムフム・・・。るいちゃんっていう女の子がでてきたよ!なんだか、不思議なオーラを感じる!

ことりさんも気になる!って思ったら、、、こんな仕掛けがあるんだ!これはまだ遊んでない人にはナイショだね。

kuma2

るいちゃんの冒険のつづき、どうなるのかな?!ワクワク♪

 

 

 

脱出ゲームを作ってみよう!7

前回はCameraControllerというゲームオブジェクトを設置しました。今回はこのゲームオブジェクトを使って、実際にゲームを動かすまでやりたいと思います。

 

CanvasとButtonを作成する

 

ヒエラルキー(画面左側)でCreate→UI→Canvasをクリック。Canvasを作成します。Canvasを右クリックして、UI→Buttonでボタンを作成してください。Buttonの名前はButtonLeftと書き換えます。

 

同じようにもう一つButtonを作ってください。名前をButtonRightとします。

 

ButtonLeftをヒエラルキーからダブルクリックしてください。ButtonLeftがズームで表示されて、ButtonLeftの場所がわかりましたね。

 

ここで、haikei1をダブルクリックしてみてください。haikei1がズームで表示されて、haikei1の場所がわかりました。

 

オブジェクトがどこにあるか知りたいときは、ヒエラルキーからオブジェクトをダブルクリックすると見つけることができます^^

 

Buttonの場所を調整する

 

ButtonLeftを再びダブルクリックし、フォーカスしてください。白枠の中央にあると思います。これをドラッグで移動させて、左下に移動させてください。

 

ドラッグの仕方は、エディタ画面左上にあるツールボックスの、手のひらツールの一つ右のアイコンをクリックするとオブジェクトを移動させることができましたね^^

 

ボタンの位置を移動させて調整する

 

同様にButtonRightも右下に配置してください。

 

Buttonに関数を割り当てる

 

ButtonLeftをクリックしてください。下図のOnClickという箇所に、先ほどのCameraControllerをドラッグアンドドロップしアタッチしてください。Functionには、CameraControllerのPushButtonCamera1を割り当ててください。

 

ButtonLeftのOnClickにCameraControllerをアタッチし、その中のFunction欄にはCameraControllerのPushButtonCamera1を割り当てる。

 

同様にButtonRightにもOnClickにCameraControllerをアタッチし、その中のFunction欄にはCameraControllerのPushButtonCamera2を割り当ててください。

 

ここで、ゲームを実行しますエディタ中央の▶ボタンを押して、ゲームを確認してください。

ButtonLeftとButtonRightを押したときにカメラが切り替われば成功です。

 

UIボタンで画像が切り替わった

 

UIボタンを装飾する

 

さて、私がお見せしましたゲーム実行画面ですが、ButtonLeftとButtonRightの画像が違います。こちらは画像を用意してSpriteに割り当てました。

 

アイコン商用可能無料ダウンロードサイトicooon

このサイトで「矢印」と検索しダウンロードしました。無料で使いやすいので是非使ってみてください。

 

画像の設定の仕方は、画像をインポートし(すでにやりましたね)、ButtonLeftをヒエラルキーから選択、右側のインスペクタにImage (script)とある欄に、source Imageという欄があります。そこに画像をドラッグアンドドロップしてください。(再掲ですが、画像が選択できない場合は画像のImage Typeが2D and UIになっているか、その画像を選択して確認してください)

 

 

以上で背景画像とカメラの設定が完了しました。

次回に続く。

脱出ゲームを作ってみよう!6

前回(脱出ゲームを作ってみよう!5)では、カメラの位置を設定しました。

 

今回は、カメラをスクリプトによってスイッチする方法を紹介します。

 

まず、前回に引き続き今回のゴール画面です。haikei1やCameraを設置しましたね。

 

CameraControllerを設置する

大したものではないのですが、ゲームオブジェクトのCameraControllerを設置します。

 

ヒエラルキーからCreateまたは右クリックCreateでCreate Emptyをクリックして、空のゲームオブジェクトを作ってください。

 

そのゲームオブジェクトの名前をダブルクリックで変更します。ここでは「CameraController」とします(この名前はそれほど重要ではありません)。

 

Assetで右クリック、CreateでC#Scriptを選択し、スクリプトを作ります。名前を「CameraController」とします。(スクリプト名とクラス名が一致する必要があるため、この名前は間違いなく入力してください。)

できたら、下記のコードをコピー&ペーストしてください。

 

それができたら、ヒエラルキーのCameraControllerに、スクリプトのCameraController.csをドラッグアンドドロップ(アタッチという)してください。

 

ゲームオブジェクトCameraControllerを選択してください。右側のインスペクターに、Script CameraControllerという欄があります。この中に、Camera1、Camera2とあり、それぞれNoneと書かれていると思います。

 

そこに、ヒエラルキーのMain CameraをCamera1にドラッグアンドドロップして取り付けてください。Camera2の欄には、ヒエラルキーの(haikei2の子オブジェクトの)Cameraをドラッグアンドドロップしてください。

 

Main CameraをCamera1に、CameraをCamera2に取り付ける。

 

 

次回に続く

 

 

脱出ゲームを作ってみよう!5

前回はユニティを操作するための下準備をしました。今回は背景やカメラを取り付けていきたいと思います。

 

今回のゴールとなる画像

今回作業のゴールとなる画像

今回の作業のゴールはこのようになります。エディタの中央に背景の画像が配置されています。また、左側のスペース(以降『ヒエラルキー』)には、Main(未セーブだと*アスタリスクが付きますが無視してください)というメインシーンに、haikei1、Main Camera、haikei2、Camera、CameraController、EventSystem、Canvas、Button left、Button Rightというオブジェクトがありますね。

 

エディタを(前回から)初めて開いたばかりだと、メインシーン(とMain Camera)のほかにまだ何もないはずです。これからすべてのオブジェクトを作っていくので、すべて解説していくので辛抱強くついてきてください。

 

背景とカメラを設定する

 

まずは、2分割した画像の左右を、下図のようにエディタのScene画面にドラッグアンドドロップしてください。

(上部のタブがGameだとうまくいきません。Sceneタブになっているか確認。)

 

背景画像をドラッグアンドドロップする

 

そして、手動でいいので、二つの画像をぴったり合うように操作してください。

(操作の方法は、エディタの左上に手のひらのカタチのツールボタンがあるのですが、そのとなりの十字キーのようなボタンをクリックし、ヒエラルキーからhaikei1などをクリックするとできます。また、直接エディタ上のオブジェクトをクリックしてもできます。)

 

カメラを取り付ける

私の背景画像は、「haikei1」「haikei2」という名前を付けていたので、ヒエラルキーにそのように名前が出ています。これからはこの名前で背景を読んでいきます。

 

作業ができたら、カメラを背景に取り付けていきます。Main Cameraをhaikei1にドラッグアンドドロップすると、Main Cameraはhaikei1の子オブジェクトになります。今度は、haikei2の上で右クリックして、Cameraを選択してください。Cameraがhaikei2の子オブジェクトとして生成されます。

 

次に、カメラの詳細をインスペクタで編集していきます。Main Cameraを選択します。下図を見てください。

カメラのトランスフォームなど情報

Main Cameraを選択すると、右側(インスペクタという)にカメラの詳細情報を編集できる欄が現れます。Transformのpositionをx → 0、y → 0、z → -5に変更してください。ProjectionはPerspectiveのField of Viewが100に設定すればあとはデフォルトでOKです。

(が、違った場合は各々調整をお願いします。右下にカメラから見えた画像が映し出されるので、そのカメラの視点がちゃんとhaikei1をとらえているか確認してください)

(TransformのPositionのzの値を-5からいじると容易に調整ができます)

 

以上をhaikei2でも同じ数値で行ってみてください。カメラがうまく背景をとらえているか、右下のカメラプレビューで確認してください。

 

次回に続く。

 

 

 

脱出ゲームを作ってみよう!4

アイテム画像のインポートと下準備

アイテム画像のインポートとUnityをいじっていくための下準備をしていきたいと思います。

 

まずは、Unityのエディタを開いて、右クリックからCreate→Folderでフォルダを作成し、「Images」という名前のフォルダを作成してください。次にImagesフォルダをクリック。

以前の再掲になりますが、アイテム画像は下記のようにエディタ上にドラッグアンドドロップしてインポートすることができます。集めた画像をインポートしてください。

 

そして、インポートした画像をクリックすると、右側の画面にInspectorという箇所があります。その中で、Texture Typeという欄があるので、クリックしてSprite(2D and UI)にしてください。

 

画像をクリックして赤丸の部分をSprite(2D and UI)にする。

 

各々の画像にこれを行ってください。「Apply?」という風に出たときはApplyをしてください。

 

下準備

 

Unityをいじっていくための下準備をこれからしていきたいと思います。

 

このゲームはAndroid用の画面の大きさで作っていきたいきます。

左上のFile→BuildSettingsから下記のようにAndroidを選択してください。Switch Platformを押してください。「No Android… module loaded.」と表示されて切り替えられないときは、Open Download Pageをクリックして、Androidのモジュールをインストールしてください。

BuildSettingsからAndroidの画面にする

作成するゲームの画面の大きさを決まます。ユニティエディタのGameタブからWxga Portrait (800×1280)を選択してください。

画面の大きさをWxga Portrait (800×1280)にする

 

この回は以上です。

次回に続く


ゲーム制作ランキング
良ければぽちっと押してください。

脱出ゲームを作ってみよう!3

まず忘れないように、こんな脱出ゲームを作成しました。これができるまでの簡易チュートリアルを作っています。

 

クリックでAndroidアプリストアに飛びます↓

バナー

 

こんな画像が集まりました!

まず、前回(脱出ゲームを作ってみよう!2)では画像の集め方と、トリミングの仕方を紹介しました。

 

私はこんな画像を集めてトリミングしてみました^^

 

1.パソコンの画像。スイッチを押すと(なぜか)くるみが手に入る。

 

2.くるみの画像。ハンマーでたたき割ると(なぜか)玉が入っている。

 

3.玉の画像。くるみを割ると出てくる。プロジェクターにかざすと、鍵のありかがわかる。

 

4.鍵の画像。外に出られる鍵。(脱出成功!!)

 

5.ハンマーの画像。どこかで発見できる。

 

6.コネクタ。PCに接続してPCが起動する。

この画像ですが、自宅にあったコネクタをスマホで撮影し、ワードで編集しました^^家にあるものを写真でとってアイテムに使ってしまうのもいいかもしれませんね。

 

 

そして、背景画像も用意する必要があります。今回はこのような背景画像にしました。

7.オフィスの背景画像。何らかの文脈でここに迷い込み、脱出を図ります。

 

背景画像を2分割する

 

脱出ゲームには1面だけでなく何面も移動してゲームを進めていきますね。

 

今回は簡易版ということで、背景画像を左右に2分割して2面のゲームにしたいと思います。

 

このサイトでトリミングしました。

 

背景画像を無料で(会員登録なしで)行いたかったので、このサイトを利用しました。画像を選択して、オンラインでトリミングし、ダウンロードも簡単にできました^^

 

画像トリミングの様子

ということで、下記に背景1と背景2ができ、ゲームの素材が集まりました!!

 

 

 

今回は、前回の画像トリミングを実践しました。そのなかで、画像サイトからダウンロードした画像だけでなく、自撮りした画像もアイテムとして使えるじゃん!ということが分かり、またずいぶん簡単さが増したなぁという感じです^^

 

では次回はUnityをいじっていきましょう!!

 

次回へ続く

 


ゲーム制作ランキング
良ければぽちっと押してください。

ツールバーへスキップ