裏鍵.dump

自分用備忘録。内容に脈絡を求めてはいけない。

Slyme Sco-Attackで使用した有料アセットの紹介

前回の続き。

スラスコでは下記2つのアセットを購入したので、順番に紹介していく。

・Easy Save

ピクセルアートフォント

 

Easy Save

 

Easy Save - The Complete Save & Load Asset

 

名前の通り、ゲームのセーブ/ロード関連を簡単に実装できるアセット。

 アセットストアは実際に購入してみるまで自分に扱えそうなものなのかがよくわからないのがちょっと不安に感じるところではあるのだけど、このアセットは作者さんが自身のサイトで簡潔でわかりやすいリファレンスを用意してくれているので安心。購入を迷っている方はそちらを参照するといい。

docs.moodkie.com

上記から「Scripting API」→「Methods」と辿っていくと、使用できる関数と一緒にC#Javaの簡単な実装例が書いてある。

もう少し突っ込んだ実装例が見たければ、「Guides」を見てみよう。

 

少しお値段が気になるところではあるけど、ゲームを作る上でセーブは避けて通れないので、これからもずっと使うことを考えると損はしない買い物だと思う。どうしてもというならちょくちょくチェックしてセールを待つのもあり。

 

 

ピクセルアートフォント

 

Pixel Art Fonts

 

英数字のドット文字を表示させることができるアセット。

 パッケージの中身を見ると分かるとおり、fontsettingsがたくさん入っている。

使い方は簡単で、パッケージを導入したらTextのFontを切り替えるだけ。

試しに初期のArialをHelpというフォントに変えてみた。

f:id:cores0316:20171105111503j:plain

f:id:cores0316:20171105111538j:plain

一つ注意としては、上の画像では問題ないように見えるけど、ドット文字にするとものすごく小さくて見えなくなることがあるので、その場合はScaleやWidth、Heightを調整してあげる必要がある。

 

表現も単色に留まらず、2つのテキストを同じ位置に置いて片方に「~-outline」、もう片方に「~-fill」のフォントを指定することでフチと中身で色が異なるような表現も可能。

f:id:cores0316:20171105112405j:plain

 

日本語は使えないので日本人としては少し使えるシーンが限られるものの、8bitライクなゲームを作りたい人は買っておいてもよいかと。値段も5ドルちょっとと手を出しやすい。

 

 

 以上で紹介は終わり。

上でも書いたけど、アセットストアで良さそうなのを見かけても自分に扱えるかがわからないせいでなかなか手を出せないことも多いので、今回のキャンペーンを機に色々なアセットの使用レビューが増えてくれるといいなぁと思う。

Unityアフィリエイトに参加してみた

Unity一週間ゲームジャムを主催していたり
個人的にもスラスコの開発版公開でお世話になっている
unityroomさんが、Unityアセットポータルさんとこんな企画を展開中。

unityroom & 1week GAMEJAMの投稿作品にアセットを登録してバウチャーをゲットしよう! – Unity Asset Portal


Unity一週間ゲームジャムについては、第1回目に一度だけ参加して
まぁ出来の悪い作品を公開したことがあるのだけど、アセットは使用せずに
素材も自作で頑張ってしまったために自分にはあまり関係なさそうだなぁ・・・と思っていたところ、
目を通してみると過去に登録したものでゲームジャム以外も対象になるという。
スラスコには2つの有料アセットを使用させていただいたので、せっかくだからやってみようと思い立ったのだった。

Unityアフィリエイト参加申請

下記のページにアクセスして「応募する」ボタンを押す。

unity3d.com

表示されたフォームに必要なユーザ情報を埋めていく。
一番上のリストから言語を日本語にしておいたほうがわかりやすい。
特に詰まるようなところもないはず。

一通り埋めて申請すると、登録したメールアドレスの方に
Unity Affiliateプログラム参加申請確認のお知らせ」という
メールが送られてきた。
5労働日以内に審査してくれるとのこと。



待つこと2日、土曜日の朝に無事審査通過の連絡があった。労働日とは・・・
これでトークンが発行されたので、自分用のアフィリエイトリンクを作成できるようになったらしい。
いい機会なのでアセットの紹介記事もちゃんと書いてみるとしよう。

VR Samplesからソースを拝借して視線選択UIを作ってみる

先日の続き。


VRのサンプルプロジェクトとして、Unityが公開してくれているこんなものがある。
https://www.assetstore.unity3d.com/jp/#!/content/51519


また、こんな解説を用意してくれている。
Unity - VRでのインタラクション



視線をあわせて選択できるUIが欲しかったので、上記をぱk・・参考・・ぱくらせて頂いた話。




とりあえず新しいプロジェクトを作ってCanvasを置いた。

見やすいようにPanelも追加してある。

f:id:cores0316:20171005192246j:plain


視界の中心に点を表示する

まずは自分が向いている方向の中心がわかるようにするための点を準備する。

f:id:cores0316:20171005193059j:plain

Camera(eye)の下にCanvasを追加し、Render Modeを「World Space」にする。

Event CameraにはCamera(eye)を指定。(上の画像では忘れてたのでNoneになっている)

位置は親と同じ、大きさとScaleは適当に2、0.5を指定。




f:id:cores0316:20171005200227j:plain

さらにCanvasの下にImageを追加し、適当に大きさを2、Scaleを0.02あたりにする。

表示する点はVR Samplesからありがたく拝借。

Source Imageに「GUITargetReticle」、Materialに「GUIOverlay」を指定する。

色は自分がわかりやすいもので。上の画像では#FF2266FFを指定。


この時点でビルドしてHMDを覗いてみても点は見えないので悪しからず。


次にVR Samplesから下記のスクリプトを拝借してカメラに追加する。

・Reticle

・VREyeRaycaster

・VRInput

f:id:cores0316:20171005201425j:plain


これらのスクリプトの必要な項目を埋めていく。

埋めた結果は下記の通り。

f:id:cores0316:20171005202737j:plain

具体的には・・・

・Reticle

 Imageに先ほど作ったCanvas下のImageを指定

 Reticle Transformに上記ImageのRect Transformを指定(Imageを直接D&Dでいい)

 CameraにCamera(eye)を指定

・VREyeRaycaster

 CameraにCamera(eye)を指定

 ReticleにCamera(eye)に追加しているReticleスクリプトを指定

 Vr InputにCamera(eye)に追加しているVRInputスクリプトを指定


ビルドしてHMDを覗いてみると、中心に指定した色で点が表示されているのが見えるはず。



視点をあわせて選択できるボタンを追加する

PanelにButtonを追加する。

ButtonにはBox ColliderとVR Samplesから拝借したVRInteractiveItemスクリプトを追加する。

f:id:cores0316:20171005210802j:plain

Box ColliderのSizeはButtonの大きさに合わせた。Z軸は適度な薄さということで10を指定。


新しくスクリプトを作成して、下記のようなコードを記述する。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using VRStandardAssets.Utils;
using UnityEngine.EventSystems;

public class VRButton : MonoBehaviour {

    Button button;
    VRInteractiveItem vrIntrItem;

    // Use this for initialization
    void Start () {

    button = GetComponent<Button>();
    button.onClick.AddListener(PushedButton);

    vrIntrItem = GetComponent<VRInteractiveItem>();
    vrIntrItem.OnOver += OnOver;
    vrIntrItem.OnOut += OnOut;

    }

    // Update is called once per frame
    void Update () {
        
    }

    // ボタンが押されたときの挙動
    void PushedButton()
    {
        Debug.Log("Button Pushed.");
    }

    void OnOver()
    {
        // ボタンを選択状態にする
        button.Select();
    }

    void OnOut()
    {
        // 選択状態を解除する
        EventSystem.current.SetSelectedGameObject(null);
    }
}


ここまでできたらビルドしてみよう。
視線をボタンに向けるとHighlighted Colorに変わり、Fire1にあたる右側のViveコントローラのメニューボタンを押すとボタンを押すことができるはず。
下記はわかりやすいようにHighlighted Colorを変更している。
f:id:cores0316:20171005230707g:plain

既存のUIをVR空間に置いてみる

先日の記事に関連したメモ。

 

VRでUIを扱う場合、今までのゲームのような画面にぴったり貼りついたようなものだと没入間が削がれたり視界の邪魔になったりとあまりいいことが無い。

簡単な解決法の1つとしては、3D空間にUIを浮かして表示するというものがある。

今回はそれをやってみようという話。

 

イメージとしては、

f:id:cores0316:20171002175749j:plain

こんな感じで画面に表示されていたUIを

f:id:cores0316:20170927053328p:plain

この絵の右側のように空間に表示する感じ。

 

貼りついたように表示されているUIは、CanvasのRenderModeが「Screen Space - Overlay」になっているので、これを「World Space」にしてやる。

f:id:cores0316:20171002180538p:plain

 

これでCanvasの座標を変更すれば3D空間の好きな場所に配置できるようになるのでめでたしめでたし・・・と言いたいところだけど、もう一手間加える必要がある。

上の画像でもわかるように、VR以外向けに作られたCanvasというのはものすごくでかい。Canvasの左下に見える小さなものがタイトル画面の背景なので、Canvasの解像度1がUnity上の1で作られているのかも。

なので、CanvasのScaleをものすごく小さくしてやる必要がある。

 

f:id:cores0316:20171002184811j:plain

冒頭のイメージ画像のCanvasはこんな感じ。Scaleは0.005まで小さくしている。

 

自作ゲームをVR化してみた

先立って公開したゲームにSteamVR Pluginを導入してVR化に挑戦、いろいろ機能を制限したりシステムを練り直したりしてとりあえず遊べる形にしたので公開してみた。

 

 

f:id:cores0316:20170927053328p:plain

実績周りを練りなおすのには時間がかかるので外した。

 

f:id:cores0316:20170927053520g:plain

トリガーを引くと右手でファイアボール、左手でサンダーを撃てる。

トルネードを仕込むのは操作が複雑になるのでやめた。

 

 VR開発は日本語の情報がそんなに多くないし、作ってみても自分も環境を複数用意できない上に周りに持っている人もいないので公開前のテストも難しく、まだまだ敷居が高いなぁという印象。

キーワードで検索すると意外と中国語の情報が引っかかる。やっぱり今勢いがあるんだろうな。

初ゲーム開発で苦労した話

前回の更新から1年も経ってしまった。時間が過ぎるのは本当に早い。

 

記事は書いていなかったけど、このブログの状況はちょくちょく確認していた。

ほぼ放置していたのに星やコメントを頂いたり、苦労して書いたボクセルの記事が誰かの役に立っていたりと嬉しいこともいくつかあって、ブログ記事更新とは別の方向でモチベーション向上に役立った。本当にありがとうございます。

この期間何もせず遊んでいただけではなくて、今回はそのお話がメイン。

 

初の自作ゲーム開発

  ブログに書いてきた話の次へのステップとして、ちゃんと遊べるゲームを1本仕上げてみよう、ということで開発に着手。しかし、その道は想像以上に困難なものであった・・・。

ジャンルや内容を決めるのが大変

 ゲームを特徴付ける大前提。人によっては「そんな馬鹿な」と笑うだろうけど、絵を描くにも真っ白な画用紙の前で長時間悩むような自分にはなかなか決められなかった。

居酒屋のごとく「とりあえず生中」のごとく「とりあえずRPG」なんて選択をしようものなら簡単にエターナることは想像がつく。それに付随する内容だって、思いついたものをホイホイ入れるとエターナる可能性が急上昇する。

スマホ向けを考えていたので、インプットの制限も悩みの種だった。スマホゲームの仮想十時キーというのは動かしづらくて嫌いなので採用したくない。となると、主人公を好きな方向に動かすような方向でアクション性が高いゲームも選択肢から外れてしまう。

今の自分に作れて、できるだけ小粒で済むものがなかなか見つからなかった。

素材を作るのが大変

そんなに多くの素材を必要としないゲームにしたつもりだったけれど、それでも想像以上の手間だった。一言でいえば設計・想定が甘いのだけれど、実装時になってあれも必要これも必要と見えてくることが多かった。ただ、時間さえかければ大抵なんとかなるので他に比べれば今回は大したことない問題ではある。

ゲームの本筋以外を作るのが大変

ここで言う本筋とは、魔法でスライムをやっつけているところの部分。本筋の開発は多少の仕様変更がありつつもまぁまぁ順調に進んだ。

問題はそれ以外のメニュー周りなどの参考書等でもあまり触れられない部分。情けないことに最大の敵はモチベーションであった。

本筋以外のところは、実に地味な作業が続くうえに動かしたところでぱっと見で面白いものがそう見られるわけでもない。特にインターフェイスが難しく、デザインの心得も全く無いので良い表現が思いつかず数日作業が止まって悩むことも。

今まで何気なく遊んでいたゲームでも、その道のプロによってわかりやすい簡潔なインターフェイスが考案・実装されているのが痛感できて勝手に尊敬の念を送っていた。

GooglePlayへの公開が大変

せっかくだからGooglePlayで公開してしまおう、ついでに広告も載せてみようという完全に当初の予定外の作業。

公開にあたっては多くの規約を読む必要があるし、公開するゲームがそれに準じているか確認しなければならない。公開する国が増える場合、その国の決まりやレーティングもクリアしている必要がある。プレイヤーの端末情報を参照・収集している場合は更に規約が・・・というように、事務的な作業が続く。

さらに広告を表示させる場合は、表示される広告自体も全規約に触れないかよく確認しないといけない。よくやりがちなのが、全年齢対象のゲームなのに広告配信カテゴリの設定を忘れてアダルトな内容が含まれてしまうこと。

問題ないことを確認してGoogleに提出しても、彼らはネット全体を通してよく見ているので思わぬ理由でリジェクトになることが多い。今回自分が直面したのは、事前に別サイトでテスト公開していたものと同一と思われるのでNGというものだった。メールで理由を説明したらすぐに納得してもらえたので一安心。最初の提出時に所定の場所に記載しておくと同様の問題は起こらないことも教えてもらえた。

アカウント開設から含めると公開完了まで2週間くらいはかかっただろうか。恐らく今回はゲームが小規模で配慮が必要な内容も少なく済んだから、すんなりいった方だと思う。リジェクトの理由によっては確認と修正でさらに時間がかかりそう。

 

結局、本筋以外全部大変と書いてしまったような。

まぁ実際は本筋も他に比べれば楽なだけで大変なので、全部大変なのだけど。

そんなこんなで紆余曲折を経て出来上がったのが下記のゲームである。

 

初の自作ゲーム公開

play.google.com自分が宣伝できる媒体がTwitterくらいしか無いのでそこでしか報告はしていなかったけど、ありがたいことに多くのRTやいいねを頂けたし、実際に遊んだ上でコメントや評価まで入れてくださった方もいる。この場を借りて御礼申し上げます。本当にありがとうございました。コメントに頂いているマルチタッチ対応・・・できればしたいですね・・・。

難しいという評価を頂いているので、もうちょっと難易度を下げたほうがよかったかもしれない。HARDや隠し難易度のHELLは魔法を撃ちまくった上でぎりぎりクリアのやりこみ難易度を目指して調整したので想定通りではあるけれど、スマホゲームはダメだと思ったら即アンインストールされてやりこみも何も無くなってしまうのでこの辺の匙加減はとても難しい。

宣伝はTwitterだけ、広告も誤タッチすらありえない場所に1つだけという状況なので当たり前とはいえ、個人開発のスマホアプリで生計を立てていく厳しさの一端も垣間見ることができた。

 

 

とまぁこんな感じで、途中何度かエターナる危険があったもののなんとか目標は達成できた。

上記の通り思い返すと苦労ばかりだけれど、自分の頭の中にしかなかったものが形になった・できたというのはすごく嬉しい。喉元過ぎれば苦労話も実績である。

まだ次に何を作るか決めていないけれど、日々手がけておいたちょっとした小ネタや小物が素材のネタになることがあるのを実感したので、何かしら手を動かしておきたいと思う。

 

あ、ちなみに別サイトで先立って公開していたテスト版とは下記のこと。

スマホで公開しているものとほぼ変わらないので、環境の無い方はこちらで是非。

Slyme Sco-Attack | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

ボクセルモデルを切り分けて顔のテクスチャを差し替える

どうにもタイトルを考えるというのは苦手だ。

タイトルから想像していたのと違う話だったらごめんなさい。

 

 

前回までの作業

urkgdmp.hatenadiary.jpで、当初の目的は無事完了したので、もっと使いやすくするための話。

 

今は、モデル全体のテクスチャ情報を1枚の画像に保存している。

f:id:cores0316:20160729191005p:plain

この状態だと、顔のようなどこか一部分だけを変えたいとき、そこだけを書き換えた全体の画像をそれぞれ用意してやらないといけない。

これはとても無駄が大きいのでなんとかしたい。

 というわけで、Blender上で必要なところだけモデルを分割して、それぞれのモデルからテクスチャを作成するという方法を採ってみる。

 

 

・モデルを切り分ける

 まず、Blender上でモデルを切り分ける。

今回は顔の表情を変えたいので、顔の部分だけを切り取ることにする。

 

Object Modeでモデルを選択した状態にして、Edit Modeに移行する。

赤枠の部分のボタンを押して、面選択モードに切り替える。

f:id:cores0316:20160810234954p:plain

顔にあたるところの頂点をSHIFTキーを押しながら右クリックで選択していく。

f:id:cores0316:20160810235249p:plain

 そしてPキーを押して表示されたメニューから、「Selection」を選択する。

f:id:cores0316:20160810235255p:plain

これで顔の部分だけ分割できた。

 

試しに選択して動かしてみる。ひ、ひぃ・・・。

f:id:cores0316:20160810235555p:plain

 

 

・別々にUV展開

ここまで来たら、後は前回までにやったことのある作業だ。

 

顔以外を選択した状態でUV展開して頂点色を焼きこみ。

顔の部分が無くなって構成が変わっている。

f:id:cores0316:20160811000635p:plain

 

顔を選択した状態でUV展開して頂点色を焼きこみ。

ただ、サイズは標準の1024x1024では大きすぎるので128x128にした。

また、「Smart UV Project」を使用すると画像サイズ全体に引き伸ばされたUI座標で長方形になってしまうため、メニューの一つ上にある「Unwrap」を使用した。

f:id:cores0316:20160811002906p:plain

 

それぞれのテクスチャを画像で保存する。

 

作業していたBlenderも進捗を保存して閉じる・・・前に、忘れていた。

モデルを切り分けたときに名前がついているので、右上のウィンドウから適当な名前に修正しておく。

変更前

f:id:cores0316:20160811005259p:plain

変更後

f:id:cores0316:20160811005636p:plain

 

・別の表情を作っておく

顔のテクスチャを編集して、確認用に下記のような画像を作った><

f:id:cores0316:20160811004827p:plain

 

 

・Unityに取り込む

blendファイルをUnityに放り込む。

Materialsフォルダの下に2つのマテリアルが出来ている。

f:id:cores0316:20160811011349p:plain

モデルの方も、分割したものがそれぞれ入っている。

f:id:cores0316:20160811011520p:plain

Texturesフォルダを作成してテクスチャを取り込む。

顔の背景透過色をいつの間にか変更してしまったらしい・・・。

f:id:cores0316:20160811012030p:plain

 

あとはマテリアルにテクスチャを指定すれば切り替えられるので、ソースで好きなときに変更できる。

試しにInspector上で変更してみた。

f:id:cores0316:20160811012741p:plain

f:id:cores0316:20160811012749p:plain

 

いい感じだ><