Unityアフィリエイトに参加してみた
Unity一週間ゲームジャムを主催していたり
個人的にもスラスコの開発版公開でお世話になっている
unityroomさんが、Unityアセットポータルさんとこんな企画を展開中。
unityroom & 1week GAMEJAMの投稿作品にアセットを登録してバウチャーをゲットしよう！ – Unity Asset Portal
Unity一週間ゲームジャムについては、第1回目に一度だけ参加して
まぁ出来の悪い作品を公開したことがあるのだけど、アセットは使用せずに
素材も自作で頑張ってしまったために自分にはあまり関係なさそうだなぁ・・・と思っていたところ、
目を通してみると過去に登録したものでゲームジャム以外も対象になるという。
スラスコには2つの有料アセットを使用させていただいたので、せっかくだからやってみようと思い立ったのだった。
Unityアフィリエイト参加申請
下記のページにアクセスして「応募する」ボタンを押す。
表示されたフォームに必要なユーザ情報を埋めていく。
一番上のリストから言語を日本語にしておいたほうがわかりやすい。
特に詰まるようなところもないはず。
一通り埋めて申請すると、登録したメールアドレスの方に
「Unity Affiliateプログラム参加申請確認のお知らせ」という
メールが送られてきた。
5労働日以内に審査してくれるとのこと。
待つこと2日、土曜日の朝に無事審査通過の連絡があった。労働日とは・・・
これでトークンが発行されたので、自分用のアフィリエイトリンクを作成できるようになったらしい。
いい機会なのでアセットの紹介記事もちゃんと書いてみるとしよう。
VR Samplesからソースを拝借して視線選択UIを作ってみる
先日の続き。
VRのサンプルプロジェクトとして、Unityが公開してくれているこんなものがある。
https://www.assetstore.unity3d.com/jp/#!/content/51519
また、こんな解説を用意してくれている。
Unity - VRでのインタラクション
視線をあわせて選択できるUIが欲しかったので、上記をぱｋ・・参考・・ぱくらせて頂いた話。
とりあえず新しいプロジェクトを作ってCanvasを置いた。
見やすいようにPanelも追加してある。
視界の中心に点を表示する
まずは自分が向いている方向の中心がわかるようにするための点を準備する。
Camera(eye)の下にCanvasを追加し、Render Modeを「World Space」にする。
Event CameraにはCamera(eye)を指定。（上の画像では忘れてたのでNoneになっている）
位置は親と同じ、大きさとScaleは適当に2、0.5を指定。
さらにCanvasの下にImageを追加し、適当に大きさを2、Scaleを0.02あたりにする。
表示する点はVR Samplesからありがたく拝借。
Source Imageに「GUITargetReticle」、Materialに「GUIOverlay」を指定する。
色は自分がわかりやすいもので。上の画像では#FF2266FFを指定。
この時点でビルドしてHMDを覗いてみても点は見えないので悪しからず。
次にVR Samplesから下記のスクリプトを拝借してカメラに追加する。
・Reticle
・VREyeRaycaster
・VRInput
これらのスクリプトの必要な項目を埋めていく。
埋めた結果は下記の通り。
具体的には・・・
・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スクリプトを追加する。
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を変更している。
既存のUIをVR空間に置いてみる
先日の記事に関連したメモ。
VRでUIを扱う場合、今までのゲームのような画面にぴったり貼りついたようなものだと没入間が削がれたり視界の邪魔になったりとあまりいいことが無い。
簡単な解決法の1つとしては、3D空間にUIを浮かして表示するというものがある。
今回はそれをやってみようという話。
イメージとしては、
こんな感じで画面に表示されていたUIを
この絵の右側のように空間に表示する感じ。
貼りついたように表示されているUIは、CanvasのRenderModeが「Screen Space - Overlay」になっているので、これを「World Space」にしてやる。
これでCanvasの座標を変更すれば3D空間の好きな場所に配置できるようになるのでめでたしめでたし・・・と言いたいところだけど、もう一手間加える必要がある。
上の画像でもわかるように、VR以外向けに作られたCanvasというのはものすごくでかい。Canvasの左下に見える小さなものがタイトル画面の背景なので、Canvasの解像度1がUnity上の1で作られているのかも。
なので、CanvasのScaleをものすごく小さくしてやる必要がある。
冒頭のイメージ画像のCanvasはこんな感じ。Scaleは0.005まで小さくしている。
自作ゲームをVR化してみた
先立って公開したゲームにSteamVR Pluginを導入してVR化に挑戦、いろいろ機能を制限したりシステムを練り直したりしてとりあえず遊べる形にしたので公開してみた。
最低限遊べる形になったので公開します。Viveをお持ちでお暇な方はお試し頂けると嬉しいです。#unity3d #indiedev
— cores (@cores_g) 2017年9月25日
SlymeScoAttackVR_0.1https://t.co/pEbHycs02j
実績周りを練りなおすのには時間がかかるので外した。
トリガーを引くと右手でファイアボール、左手でサンダーを撃てる。
トルネードを仕込むのは操作が複雑になるのでやめた。
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枚の画像に保存している。
この状態だと、顔のようなどこか一部分だけを変えたいとき、そこだけを書き換えた全体の画像をそれぞれ用意してやらないといけない。
これはとても無駄が大きいのでなんとかしたい。
というわけで、Blender上で必要なところだけモデルを分割して、それぞれのモデルからテクスチャを作成するという方法を採ってみる。
・モデルを切り分ける
まず、Blender上でモデルを切り分ける。
今回は顔の表情を変えたいので、顔の部分だけを切り取ることにする。
Object Modeでモデルを選択した状態にして、Edit Modeに移行する。
赤枠の部分のボタンを押して、面選択モードに切り替える。
顔にあたるところの頂点をSHIFTキーを押しながら右クリックで選択していく。
そしてPキーを押して表示されたメニューから、「Selection」を選択する。
これで顔の部分だけ分割できた。
試しに選択して動かしてみる。ひ、ひぃ・・・。
・別々にUV展開
ここまで来たら、後は前回までにやったことのある作業だ。
顔以外を選択した状態でUV展開して頂点色を焼きこみ。
顔の部分が無くなって構成が変わっている。
顔を選択した状態でUV展開して頂点色を焼きこみ。
ただ、サイズは標準の1024x1024では大きすぎるので128x128にした。
また、「Smart UV Project」を使用すると画像サイズ全体に引き伸ばされたUI座標で長方形になってしまうため、メニューの一つ上にある「Unwrap」を使用した。
それぞれのテクスチャを画像で保存する。
作業していたBlenderも進捗を保存して閉じる・・・前に、忘れていた。
モデルを切り分けたときに名前がついているので、右上のウィンドウから適当な名前に修正しておく。
変更前
変更後
・別の表情を作っておく
顔のテクスチャを編集して、確認用に下記のような画像を作った＞＜
・Unityに取り込む
blendファイルをUnityに放り込む。
Materialsフォルダの下に2つのマテリアルが出来ている。
モデルの方も、分割したものがそれぞれ入っている。
Texturesフォルダを作成してテクスチャを取り込む。
顔の背景透過色をいつの間にか変更してしまったらしい・・・。
あとはマテリアルにテクスチャを指定すれば切り替えられるので、ソースで好きなときに変更できる。
試しにInspector上で変更してみた。
いい感じだ＞＜
MagicaVoxel→Blender→Unityでボクセルモデルを動かす 改③（終）
ボクセルモデルに自動ウェイト機能を使って楽をしたい、の3回目。
前回は、MagicaVoxelのエクスポートにply形式を使うことで、Blenderの自動ウェイト機能を使用することができたところまで進んだ。
今回はそれをUnityに取り込むところから。
前回の最後、blendファイルをUnityにインポートしようとするとエラーになると書いたのだけど、どうやら今のUnityとBlender2.77で問題が発生するためらしい。
この前インポートできていたファイルもできなくなっていた。
Windows7上だけじゃないかという話も。
・Unityへインポート
仕方ないのでBlenderのバージョンを2.74に戻したところ、そのまま読み込めるようになった。
とはいえ、なかなか思うようにはいかない。
ply形式の場合、色は頂点色を用いていたのでテクスチャが存在しない。
頂点色は取り込めないみたいで、これをSceneに配置しても寒天で作ったようなキャラしか表示できなかった。
・頂点色からテクスチャを作る
無ければ作るしかない。
一旦Blenderに戻る。
調べてみると、UV展開で作成したUVマップに頂点色を焼きこんでやることで作れるらしい。
何を言っているかわからん？
大丈夫だ、自分もよくわかっていない。
まずは作業に必要なウィンドウを用意する。
上の赤枠のボタンを押して、UV Editingを選択する。
左にUV/Image Editor、右に3D Viewという配置になる。
plyでインポートしたのに左にテクスチャらしきものが出ているのは、このblendファイルがobjをインポートしたものを使いまわしているため。通常は存在しない。下の「×」ボタンを押して消しておく。
UV展開
さて、ボクセルモデルに対してUV展開を実行する。
やることは、サイコロのような立方体にハサミを入れて十字のような平面にする作業と思って間違いない・・・はず。
Edit ModeでAキー2度押しで全メッシュを選択し、下のメニューからMesh→UV Unwrap→Smart UV Projectを選択する。
処理に必要な閾値らしきものを訊かれるので、そのままOKを押す。
すると左側に何か出た。
これが右のモデルを平面に展開したもの。というよりは、UV座標の対応表といった方が近い？
この対応表を適用する、テクスチャの実体を用意してやろう。
下の「New」と書いてあるボタンを押す。
作成するテクスチャの名前と大きさ、色等を決めてOKを押す。
自分は名前をEmily_texとし、それ以外はそのままOKにした。
すると、このようになる。
下の方にアニメーション作成で見た覚えのあるFボタンがあるので、念のため押しておく・・・。
これでUVマップが出来た。
頂点色焼きこみ
このテクスチャに、頂点色を焼きこむ。
右側のウィンドウをProperty（今までのDefault画面でずっと右側に出ていたやつ）に切り替えよう。
左下のボタンから選択する。
上に並んだアイコンの中からカメラのアイコンを探して選択し、下にスクロールしていくと「Bake」という項目がある。これを使用する。
「Full Render」と書かれたところをクリックして、出てきた一覧から「Vertex Colors」を選択し、すぐ上のBakeボタンを押す。
すると、左側のテクスチャに対応する頂点色に基づいた色が描き込まれる。
このテクスチャを保存・・・しようと思ったが、ふと右側を3D Viewに戻して見てみるとモデルに何やら細かい線のようなものが出来てしまっている。
これは、テクスチャ側の色矩形とUV座標の矩形がわずかにずれてしまうことで発生するらしい。
詳しくは下記のやり取りにて。
ありがたいことに解決法も記載してあるので試してみよう。
unwrapするときのIsland Marginという値を0.05にして
BakeのMarginを1にする。
結果は下記の通り。
テクスチャの方は余分な色塗りを小さくして、UV座標の方はちょっと小さめに設定するようにした感じだろうか。
素晴らしい。
下のメニューからImage→Save As Imageで画像ファイルとして保存する。
blendファイルも保存してBlenderを閉じる。
・Unityへインポート再挑戦
Unityを起動して適当なプロジェクトを作成し、先ほど保存したblendファイルを放り込む。
Texturesフォルダを作成して、同じく先ほど保存した画像ファイルを放り込む。
隣のMaterialsフォルダに移動してマテリアルを選択し、Inspectorビューでテクスチャを指定する。
モデルをHierarchyに放り込むと・・・
できたー
見た目変わらないので画像にはしないけど、アニメーションも問題なく動作した。
ということで、今回辿った方法をまとめると下記のようになる。
①MagicaVoxelでモデリング、ply形式でエクスポート
②Blenderにインポート、重複頂点削除
③ボーンを設定して自動ウェイト設定、必要に応じて手修正
④アニメーション作成
⑤頂点色をテクスチャに焼きこんで別途保存
⑥Unityにインポート、加工して動かす
なんだか山登りで山頂から今まで登ってきた道を見下ろしているような感覚になるなぁ・・・。
せっかく3Dモデルを動かせるようになったのだから何か作りたいね。
