streaming kitAVerMedia BU110

まずはここから「伊藤流」Unity初心者講座【2048】前編

「Unityを勉強したいのだけど何をすればいいのかわからない

 

「Google で 『Unity 初心者』と検索しても欲しいものがみつからない

 

「本買って勉強しようとしたけどモチベーションが維持できない

 

 

 

私は、最近になってUnityを勉強しようとしたけど挫折した方達の電波を受信できるようになりました。

エンジニアレベルが上がると電波を受信できるようになると先輩が言っていましたが遂に来てしまったかといった気持ちです。

このまま受信していると夢にでてきそうなので遭難信号に答えてみようと思います。

べっ別に、昔の自分と重なって力を貸したいと思ったわけなんかじゃないからね!

 

自己紹介遅れました。私はUnityを利用したVR(バーチャルリアリティー)のコンテンツ開発を行っております。伊藤と申します。

 

 

 

『ゲームが好きでゲームをつくる仕事をしたい』と考えプログラマーを決心したのが就職活動1か月前

就職活動をするためにはポートフォリオが必要だと考えていた当時、何かゲームをつくらないとといけない焦りから座学をせずにいきなり開発から始めました。

それから1か月でなんとかゲームをつくり終えました。

 

当時作ったゲームがこれです。

 

無感無痛 [無痛少女]

 

ゲームとして遊べるものが出来、いくつか賞を頂けました。

これが実現出来たことは「効率の良い勉強法ができたから」なのではと考えています。

 

当時、私が行った勉強法は「細かいことはいいからゲームをつくろう」です。

 

一般的な勉強法は「座学→ゲームをつくる」ですが「ゲームをつくる→座学」にしました。

この方法はとても効率よく勉強ができた記憶があります。

 

今回はその方法をそっくり真似てやってもらおうと思います。

 

やってもらう前にこの呪文を覚えておいてください。

 

「とりあえず動けばいい 勉強は後でやろう」

 

私は当時これを唱えながら勉強していました。

辛くなったら唱えてみてください。

 


 

今回作成するゲームは「2048」です。

上下左右の4方向で動かし同じ数字をぶつけて数字を大きくしていくパズルゲームです。私一押しのパズルゲームなので遊んだことが無い人は是非遊んでみてください。

「2048」のいいところはプログラム難易度が難しくなくUnityの機能だけで作りきることができるため素材を用意する必要がないです。

 

 

完成するとこのようになります。

遊べたりもします。

 


ではゲームを実際につくっていきましょう。

始める前にUnityエディタの画面構造が違う場合は学びにくいので一緒にしましょう(初期設定だと変更する必要はありません)。

Unityエディタのメニューから

・Window→Layouts→Default

にしてください。

今回使用しているUnityエディタのバージョンは「2018.1.0f2」です。バージョンが違う場合はUnityエディタの中身が違う場合があります。嫌な方は同じバージョンを使用することをオススメします。

 


まずはシーンを作りましょう。

Unityエディタのメニューから

File→NewScene

新しいシーンがつくられました。

ついでに新しく作ったシーンを保存しましょう。

この癖をつくっておくと後で「保存をしていなかった」ことがなくなるのでお勧めです。

また整理整頓も大切です。新しいフォルダ「Scenes」もつくっておきましょう。

 

Projectから

File→Scenes

 

で保存できます。名前はお好きなものを。私は「Main」という名前にして「Scenes」フォルダに格納しました。 


使用しないのでDirectional Lightを削除します。

Hierarchyから

Directional Lightを選択して削除


次は背景を青色にしましょう。

HierarchymのMainCameraを選択して

・Transformの「Position」を「0,0,14」

・Cameraの「ClearFlags」を「SolidColor」

・Cameraの「BackGround」を「青色」に変更

 

ゲーム用の背景もつくってしまいましょう。

Hierarchyから

UI→Canvas

で「Canvas」が作成できました。CanvasはUIを扱うための装置です。

Canvasを設定します

Hierarchyから

・RectTransformの「Position」を「0,0,0」

・Canvasの「RenderMode」を「WorldSpace」

Canvasの設定が終わりました。

次は画像素材を置いていきます。

HierarchyのCanvasを選択した状態で

UI→Image

作成した画像のInspectorから

・RectTransformの「Position」を「0,0,100」

・RectTransformの「Scale」を「0.6,1,1」

・Imageの「Color」を「水色

追加で3つ 下の画像のように作成してください。

 

 

 

 

現時点でこのようになったはずです。少し形になってきましたね。

 

 

文字を追加していきましょう。

Hierarchyから

UI→Text

作成したテキストのInspectorから

・RectTransformの「Position」を「-13,35,100」

・RectTransformの「Scale」を「0.1,0.1,1」

・Textの「Text」を「2048」

・Textの「FontStyle」を「Bold」

・Textの「FontSize」を「90」

・Textの「Alignment」を「縦横共に中央ぞろえ」

・Textの「HorizontalOverflow」を「Overflow」

・Textの「VerticalOverflow」を「Overflow」

・Textの「Color」を「白色」

他にも下の画像のようにテキストを追加してください。

 

 

プレイエリアをつくっていきます。

Hierarchyから

CreateEmpty

を生成し名前を「Values」とします。

作成したValuesを選択した状態で

UI→Text

作成したテキストのInspectorから

・RectTransformの「Position」を「-13,35,100」

・RectTransformの「Scale」を「0.1,0.1,1」

・Textの「Text」を「0」

・Textの「FontSize」を「90」

・Textの「Alignment」を「縦横共に中央ぞろえ」

・Textの「HorizontalOverflow」を「Overflow」

・Textの「VerticalOverflow」を「Overflow」

・Textの「Color」を「水色

・AddComponetボタンを押して「Shadow」を追加

Valuesをつくったのは整理しやすいようにするためです。

 

これを左上から右側に列を埋めるよう10ずつずらして後15個つくると画面が完成です。

最終的にこのようになるはずです。


Resetの画像をボタン化しましょう。

「Reset」と書かれたテキストの下に配置してある画像を選択した状態で

・AddComponetから「Button」を追加

・AddComponetから「Shadow」を追加

・Shadowの「EffectDistance」を「1,-3」

さらにResetと書かれたテキストのRaycastTargetのチェックを外してください。

仕上げにゲームオーバーとスコアアップ用に使うアニメーションテキストを追加しましょう。

ゲームオーバーのテキストを追加

Hierarchyから

UI→Text

作成されたテキストのInspectorから

・RectTransformの「Position」を「0,-37,100」

・RectTransformの「Scale」を「0.1,0.1,1」

・Textの「Text」を「空白に」

・Textの「FontSize」を「100」

・Textの「Alignment」を「縦横共に中央ぞろえ」

・Textの「HorizontalOverflow」を「Overflow」

・Textの「VerticalOverflow」を「Overflow」

・Textの「Color」を「赤色

スコアアップのアニメーションを追加

少し複雑な手順になります。

Hierarchyから

Create→Animation (名前はScoreUpとします)

Create→AnimationController  (名前はScoreUpControllerとします)

アニメーションを行うファイルが生成されました。

アニメーションファイルの設定をしていきます。

Unityエディタのメニューから

Window→Animator

このウィンドで「ScoreUpController」を設定していきます。

・CreateState→Empty (名前はDummyとします)

・CreateState→Empty (名前はScoreUpとします)※大文字、小文字に注意してください

※これにはAnimationファイルのScoreUpをアタッチしてください

ScoreUpController内はこのように配置してください。

AnimationControllerの仕様上、起動時の再生先を設定する必要があるためDummyを配置しています。

 

スコアアップ演出に使うテキストをつくります。

Hierarchyから

UI→Text

作成したテキストのInspectorから

・RectTransformの「Position」を「13,30,100」

・RectTransformの「Scale」を「0.1,0.1,1」

・Textの「Text」を「空白に」

・Textの「FontSize」を「50」

・Textの「Alignment」の「縦を右揃え、横を真ん中」

・Textの「HorizontalOverflow」を「Overflow」

・Textの「VerticalOverflow」を「Overflow」

・Textの「Color」を「白色」

・AddComponetから「Animator」を追加して「ScoreUpController」をアタッチ

次はUnityエディタのメニューにある

Window→Animation

を選択してAnimationのウィンドを表示してください。

ScoreUp用のテキストを選択した状態で

AddPropertyから

・Text→Color

・RectTransform→AnchoredPosition

を追加します。

録画マークを押し再生マークの右隣にあるマークを押します。

・Text.Colorの「Color.a」を「0」

・AnchoredPositionの「Position.y」を「50」

Hierarchyから

Create→Folder (名前は「Scripts」)

作成したフォルダの中に

Create→C#Script (名前は「GameManager」)

をつくってください。

 

「GameManager.cs」を開き下の文章を「コピー&ペースト」してください。

 

 

スクリプトを設定します。

Hierarchyにて

CreateEmptyからGameObjectを作成してください(名前は「GameMamanager」)

作成した「GameManager」のInspectorから

AddComponet→「GameManager.cs」を追加し↓を参考にアタッチしてください。

ScoreText:スコアー記載用のテキストをアタッチ

ScoreUpText:スコアアップ時に使用するテキストをアタッチ

ScoreUpAnim:スコアアップ時に使用するテキストをアタッチ

GameOverText:ゲームオーバー用のテキストをアタッチ

TextList:Valuesに格納したテキストをアタッチ 左上から右側に列を埋めるようアタッチしてください

最後に「Resetボタン」を動作するようにしましょう。

「Reset」のテキスト下にある画像を選択した状態で

Buttonの「OnClick()」の中にある「+ボタン」を押した後

「GameManager」をアタッチし「GameManager→Reset」を選択してください。

 

Unityエディタの「再生ボタン」を押してみてください。

正しい手順で行えていれば動作するはずです。

お疲れ様です。完成です。

コードを書かずUnityエディタ内で完結して作業できることが結構あると感じたのではないのでしょうか。

Unity含めゲームエンジンを利用した開発は、ゲーム感覚で直感的に楽しく作業することが出来ることがわかってもらえたら何よりです。

 

これで「ゲームをつくる」部分は終了です。

次はこれを元に「座学」をしていきましょう。

[後編へ]

 

まずはここから「伊藤流」Unity初心者講座【2048】後編

関連記事

コメント

    • ひでぽん
    • 2018年 5月 15日

    上記の説明でのリンクですが、飛べますでしょうか?
    ※Chromeを使っています

    「GameManager.cs」を開き下の文章を「コピー&ペースト」してください。
    https://gist.github.com/itotakao/035c4fcafde24455b428f33eb214f1b4.js

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ページ上部へ戻る
%d人のブロガーが「いいね」をつけました。