tanaka's Programming Memo

プログラミングについてのメモ。

AtomでPhaserのコード補完をする(メモ)

HTML5ゲームエンジンPhaserのコード補完がAtomでできるので、そのやり方の概要です。詳しくは後日まとめます。

  • Atomをインストール
  • Atomatom-ternjsパッケージをインストール
  • Phaserのプロジェクトで、npm i --save-dev tern-phaserを実行して、ternjs向けのPhaserパッケージをインストール
  • プロジェクトフォルダー内に.tern-projectを作成
    • ecmaVertionは6
    • libsはbrowserを加える
    • pluginsに"phaser": {}を加える
  • atom-ternjsThird party plugins localの修正をコードに加える
  • Atomを再起動

以上です。

ドキュメントを最新のものに対応させる

tern-phaserには、ドキュメントを生成するツールが含まれています。これを使えば、補完内容を最新のものに対応させられます。

  • nodeをインストールして、npmを使えるようにしておく
  • コマンドラインから、npm i -g jsdocで、jsdocをインストール
  • phaser-ce/build at master · photonstorm/phaser-ce · GitHub から、最新版のphaser.jsをダウンロード
  • phaser.jsをダウンロードしたフォルダーに移動
  • jsdoc -X phaser.js > jsdoc-ast.jsonを実行すると、jsonファイルの作成完了
  • 以下を実行して、jsファイルを作成
echo var jsDoc= > jsdoc-ast.json.js & type jsdoc-ast.json >> jsdoc-ast.json.js
  • 作成したjsdoc-ast.json.jsを、tern-phaserプロジェクトのdataフォルダー内に上書きコピーする
  • tern-phaserプロジェクトのgeneratorフォルダーでhttp-serverなどを起動して、HTTPサーバーを起動して、generator/html/jsdoc2tern.htmlを表示

tern用のphaser.jsを作成

  • tern-phaserプロジェクトのgenerator/node/template.jsをエディターで開いて、冒頭の箇所を、atom-ternjsThird party plugins localの指示に従って変更

変更前

(function(mod) {
    if (typeof exports == "object" && typeof module == "object") // CommonJS
        return mod(require("tern/lib/infer"), require("tern/lib/tern"));
    if (typeof define == "function" && define.amd) // AMD
        return define([ "tern/lib/infer", "tern/lib/tern" ], mod);
    mod(tern, tern);
  mod(process.__infer, proces.__tern);
})(function(infer, tern) {
  "use strict";

変更後

(function(mod) {
  mod(process.__infer, process.__tern);
})(function(infer, tern) {
  "use strict";
  • コマンドラインgenerator/nodeフォルダーを開く
  • node ./make_plugin.jsを実行して、phaser.jsを更新する

誤記の修正

2017/8/13現在、Graphics.drawTrianglesの引数indicesの表記が{indicesとなっていて、余分な{のためにエラーが発生するようになっています。上記で作成したphaser.jsAtomなどで読み込んで、9899行目を以下のように修正して{を削除してください。

f:id:am1tanaka:20170813054602p:plain

以上で、最新版のデータが完成です。tern-project/phaser.jsを、Phaserのプロジェクトフォルダーのnode_modules/tern-phaserフォルダーのphaser.jsに上書きして、Atomを再起動すればOKです。

動作確認

  • Phaser-CE2.8.3以降にしたら、Phaser.Gameの引数が、widthheightを個別に指示する形式から、configオブジェクトでまとめて指定する方法に変化します。

古いやつ

f:id:am1tanaka:20170813055410p:plain

更新成功したやつ

f:id:am1tanaka:20170813055413p:plain

リンク

Unity2017にしたらWebGLへのビルドでエラー

Unity2017.1にバージョンアップ後、WebGLへのビルドが IL2CPP のビルド時にエラーが発生するようになりました。OSはWindows7です。ログを見ると、以下のようなエラーが表示されていました。

stdout:
Building build.bc with EmscriptenToolChain.
    Output directory: C:\Users\Public\Documents\Unity Projects\webgl2017test\Temp\StagingArea\Data\Native
    Cache directory: C:\Users\Public\Documents\Unity Projects\webgl2017test\Library\il2cpp_cache
il2cpp.exe didn't catch exception: Unity.IL2CPP.Building.BuilderFailedException: INFO:root:Checking JS engine ['O:/Program Files/Unity 2017.2.0b4/Editor/Data\\Tools\\nodejs\\node.exe', '--stack_size=8192', '--max-old-space-size=2048'] failed. Check your config file. Details: Expected the command ['O:/Program Files/Unity 2017.2.0b4/Editor/Data\\Tools\\nodejs\\node.exe', '--stack_size=8192', '--max-old-space-size=2048', 'O:\\Program Files\\Unity 2017.2.0b4\\Editor\\Data\\PlaybackEngines\\WebGLSupport\\BuildTools\\Emscripten\\src\\hello_world.js'] to finish with return code 0, but it returned with code -1073741819 instead! Output: 
WARNING:root:did not see a source tree above or next to the LLVM root directory (guessing based on directory of O:\Program Files\Unity 2017.2.0b4\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten_FastComp_Win\llc), could not verify version numbers match
INFO:root:(Emscripten: Running sanity checks)
CRITICAL:root:The JavaScript shell used for compiling (['O:/Program Files/Unity 2017.2.0b4/Editor/Data\\Tools\\nodejs\\node.exe', '--stack_size=8192', '--max-old-space-size=2048']) does not seem to work, check the paths in O:\Program Files\Unity 2017.2.0b4\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\emscripten.config

原因

一時的に作成されるbuild.bcというファイルが生成されないというエラーですが、実際の原因はnode実行時の--stack_size=8192オプションがエラーを起こすことでした。試しにコマンドラインで実行してもエラーが発生することを確認しました。

そこで、ビルドが成功していたUnity5.6.2にバンドルされているnode 0.12.7で同じくnode --stack_size=8192を呼び出すと、こちらは実行できました。

それほど、エラー報告を目にしていないので、常に発生する問題ではないようですが、Windows7か、環境変数など、何らかの影響でエラーになるようです。

解決策

node.exeは、インストールフォルダー(C:\Program Files\Unity201701など)内の、Editor\Data\Tools\nodejsフォルダー内に入っています。念のため、そのフォルダー内のnode.exenode.bk.exeなどに名前を変更するなどして、とっておくとよいでしょう。

Unity5.6.2がインストールされていたら、Unity5.6.2のインストールフォルダー(C:\Program Files\Unity562など)から、Editor\Data\Tools\nodejsフォルダー内のnode.exeを、Unity2017.1の同様のフォルダー内のnode.exeと置き換えれば直りました。

f:id:am1tanaka:20170807214700p:plain

Unity5.6.2をすでにアンインストールしていましたら、こちらから、該当するOS用のインストーラーをダウンロードしてインストールして、インストール先のフォルダーからnode.exeを上書きしてください。

注意点

スタックの容量が何らかの原因で確保できないのが原因なので、nodeのその辺の設定方法があれば、スタックサイズを増やせば直るかも知れません。ちょっとそこまで調べきれていないので、よい方法があればご教示いただければ幸いです。

Unity1週間ゲームジャム「夏」に参加しました!(ちょっと追記)

3回目の参加でした。登録した作品はこちら↓

蝉ファイナル

是非、遊んで、星などいただければ幸いです^^

目次

今回の目的

今回は以下を目的に参加しました。

  • PostProcessing Stack Ver2 を試す
  • Unity2017.1 を使う
  • Blender3D でモデリング

1週間を振り返る

週の前半

この週は月曜が試験。木、金曜が、高校生向けの専門学校の体験授業があり、金曜日の夜からの参加となりました。

当初は、時間がないので専門学校の体験授業向けに作ったゲームのモデルを差し替えるだけにしようと考えていました。お題は「夏」。海に囲まれた孤島で、スイカを拾って射出するプレイヤーを操作して、ガリガリ君的な青い棒状の弾を撃ってくる敵と、島から落とし合いをする、というものでした。モデリングにはMagicaVoxelか、LeoCADを使ってみようかなと考えていました。

voxel.codeplex.com

www.leocad.org

しかしプレイヤーのイメージが固まらない、MagicaVoxelでモデリングしたとしてアニメーションをどうするのか、ビーチやスイカネタはすでにTLに溢れている、と、完成像が完全にはまとまりませんでした。

木曜日

専門学校に行くために駅に向かっていると、セミの声が聞こえてきました。アブラゼミやミンミンゼミも鳴き始めたな、と考えた時に、夏といえば「セミ爆弾」!というのが降ってきました。うちのマンションの階段でいつも晩夏の頃にやられる奴です。

そこからパッと浮かんだのが、階段を下りていると、時々セミが飛んでくるので、クリックして手で払いのける、というワンキーゲームでした。これまでのUnity1週間ゲームジャムの作品を見ていて、ノイジーな画面いいなと思っていました。今回はダークな雰囲気にして、それを試してみよう、ということで、完成像が一気にまとまりました。

金曜日

体験授業を終えて、21時ぐらいから作業を開始です。

プロジェクトの作成とアセットの追加

Unity2017.1で新規プロジェクトを作成して、必要そうなアセットをボンボン追加していきました。

階段や松明はいいやつが見つかりましたが、セミと手のモデルが見つかりません。昆虫といえば、クモ、サソリ、蝶、アリ、ハチなどなど。敵としては攻撃力がなく、蝶のように見栄えがする訳でもないセミは、あまり需要がないのか・・・。去年、撮影していた写真はあるので、最悪、円柱に写真を貼り付けて誤魔化すことにしました。セミを払いのけるための手はVR関連であるだろうと思ったのですが、無料のものは見つかりません。これも少し先のことなので、後回しにしました。

フォント、効果音、曲も見つけて追加しました。

画面作り

Dungeon Creator Kit LITEアセット(Aquarius Max)に含まれていた階段のプレハブを画面に配置しました。そこに、高さ1.5mのCubeをプレイヤーに見立てて配置。階段の大きさは調整不要でした。また、プレイヤーのCubeの適当な場所にカメラを設定しました。

次に、Unity Particle Pack(Unity Technologies)にあったTorchを配置しました。Torchはかなり大きかったので、適度なサイズに縮小。複数のTorchを配置すると、3秒ごとに画面が一瞬暗くなります。パーティクルのライフタイムと発生タイミングに一瞬の隙間があるようで、ライフタイムを少し伸ばしました。また、Torchごとに、少しサイクルを変更して、光り方が変化するようにしました。

環境光は不要なので、Light設定からSkyBoxを削除して、環境光は真っ黒に設定。あとはPost Processing Stackをいじって、想像していた感じに設定していきました。

画面のイメージを合わせるために、点数を配置して、フォントを設定してみました。

シーンの実装

ゲームロジックを実装する前に、フレームワークを組み込みました。フレームワークにアセットを追加してプロジェクトを始めればよかったのですが、Post Processing Stackを使うぞ!と先走ってしまって手順を間違えましたが、この段階なら影響なし。シーンのフェード切り替えや音の管理、naichiさんのハイスコアランキングなどが組み込まれました。

歩きの実装

ゲームロジックの実装開始です。プレイヤーとなるCubeにRigidbodyを仕込んで、前進するスクリプトを組み込みました。

次は、階段がずっと続くようにします。階段が途切れて見えないように、階段のアセットを4つ並べた上で、遠くはFogで隠れるようにしました。階段1ブロックを通り過ぎたら、そのブロックを最先端に移動するようにしました。これで無限に階段を下りることができるようになりました。

音の実装

音の管理ルーチンが組み込まれたので、H/MIX GALLERYさんで見つけたBGMをタイトルとゲーム中に組み込みました。

また、床に落下した時に足音を鳴らすようにしました。足音は効果音ラボさんからダウンロードした足音から4つほど切り出して、それをランダムで鳴らすようにしました。足から聞こえて欲しいので、Playerの足元にEmptyなゲームオブジェクトを追加して、そこにAudioSourceと4つの足音のAudioClipを持たせて、ランダムに鳴らすようにしました。

WebGLへのビルド

丑三つ時を過ぎたので、動作確認も兼ねて動画をキャプチャしようとWebGLクラウドビルドしたところ、実行時にエラーが発生!デバッグログを仕込んで実行しようにも、この時はこんな感じ。

Windowsの実行ファイルで試したところ、やはりエラー。インスタンスを取得する前に、デバッグ用の平行光を消そうとしてNull例外が発生していたのがログから分かりました。これを解決してWindowsの実行ファイルが動くようになり、スクリーンキャプチャをとって初日を終えました。

WebGLはまだ動かず。問題は持ち越しとなりました。

土曜日

WebGLのビルドがIL2CPPで失敗する原因調査

WebGLで動かなければ話にならないので、原因追求から開始です。WebブラウザーのConsoleに表示されるログを確認して、Audio関連のエラーっぽいことは分かりました。しかし・・・

最小ビルドでも失敗。プロジェクトではなく、システムの問題ということは分かりました。

しかし、βでもうまくいかず。Webで情報を調べていくと、nodeを更新したら直った、という記事がありました。

一般的に発生するエラーなら、もっと記事が見つかりそうなものなのでうちのPCの設定に原因がありそうです。しかし、根本原因を探している時間はありません。試しに、ビルドが成功するUnity5.6にバンドルされているnode.exeを、Unity2017.1のものと置き換えたところ、ビルドに成功しました!今回のゲームジャムでの最大の収穫はこれかも知れません。

ここで昼ご飯など。買い出しやセミの撮影やらを終わらせてから、デバッグログをあちこち仕込んで、ついに原因発見!

Post Processing Stackをあれこれ設定したし、もしかしたらWebでは動かないかも、と心配していましたが、問題なく動きました。

セミの作成

環境的な山は越えましたが、最大の山はセミのモデル作りでした。当初予定していたMagicaVoxelやLeoCADだと、フォトリアルな背景に合いそうにありません。それらしい形状を作って、写真を貼り付けるしかなさそうです。しかし、使えるモデルソフトはチュートリアルを見ながらテントウムシを作ったことがある程度のBlender3Dのみ。そして、インストールすらまだしていなかったという。厳しい・・・。

こんなつぶやきも出ます。テントウムシチュートリアルを見ながら、立方体を分割したり、押し出しながら、なんとなく形を整えました。やったことは大体以下のような感じ。

  • テンキーがないので、こちら( Blender(3DCG作成ソフト)の3D Viewの設定と操作 - モーリーのメモ )を見て、テンキーの操作を数字キーに割り当て
  • 真正面から撮影したセミの写真を背景に設定
    • 下絵は、平行投影([5]キー)の正面図([1]キーなど)の設定でのみ表示
  • 立方体を作成
  • ループカット([Ctrl]+[R]キー)で、それらしい角の数になるように立方体を分割
  • 頂点を移動([G]キー)して、形を整える
  • 胸の形状ができたら、各面を[E]キーで押し出して、頭や胴体を作る
  • 近くの点は、[Alt]+[M]キーで結合
  • ループカットができない部分は、ナイフでカット
    • ナイフでカットできない場合、頂点が分かれている可能性があるので、切りたい辺の頂点をマージしてみる
  • マテリアルを作成
  • テクスチャを作成
  • UVを展開して、テクスチャを書き出す
  • 写真から、UVの各パートを着色

なんとかセミらしきものが出来上がったのは、土曜の丑三つ時。

まともな資料がなかったので、厚さは適当。セミというか、目がクリクリした謎のクリーチャーになりました^^; 胸の厚みが足りないのが敗因と思われます。もう最終日です。

日曜日

時間がないので黙々と作業。をしつつ、F1とかF2とかGP3とか見たりして。

セミの実装

最終日は、セミの出現ルーチンから。Boundsで範囲を設定して、Gizmos.DrawWireCubeでギズモを描画。それを見ながら、1ブロックにつき3箇所の出現ポイントを作って、それぞれの出現ポイントにつき、1~5匹のセミを出現。

セミは死亡してるやつ、フェイントをするやつ、襲ってくるやつの3タイプ。パラメーターの設定には、勉強したばかりのScriptableObjectのアセットが役立ちました。アセットとして保存しているので、プレハブの値を[Inspector]で迂闊に修正して設定をおじゃんにするなどがないので安心して作業ができました。

死亡セミとフェイントセミはすぐにできました。あとは襲ってくるやつです。最初は旋回しながら前方に飛ぶようなややこしい動きを考えていましたが、もっとシンプルでよいのではと思い、こちらを振り向かせつつ、単純にプレイヤーの頭部目掛けて加速してくるだけにしてみました。明後日の方を向いていたやつが、突然こっちに飛んでくるという予測不能性が、セミ爆弾っぽくて成功でした。手間も大幅に省けましたし。

羽ばたきのアニメーションですが、アニメーションを勉強している時間はありません。とにかくそれらしく見えればいいんだ、ということで、Unity上で、羽を閉じた状態と、開いた状態の羽をセミにくっつけて、交互に表示を切り替えることにしました。Post Processing Stackに設定したブラーによる残像のおかげで、それらしくなりました。

最後に飛び立つ時にセミの鳴き声を再生して、セミ完成!足がないけど・・・

回避

夕方頃から、最後の要素であるセミを払いのける動作に取り掛かりました。手のモデルとして利用できそうなアセットをダウンロードしてみましたが、手をどのように動かすかが難しい。もう時間もないし、棒で叩き落せばいいか、と思って円柱を出して調整してみましたが、最後の力を振り絞って飛んでくるセミを叩き落とすというのはどうなんだろうと思えてきました。

もっとソフトに払いのけるとか、手で顔を覆うとか、避けるだけとか。そうだ!しゃがんで避けるだけならモデルが必要ないし、動かすのも楽!ということで、セミに優しく、開発工数的にも優しい完成形が見えました。

プレイヤーとぶつかった時に、しゃがみ状態だったら得点を入れて、そうじゃなければゲームオーバーに移行。これでゲームシステムが完成しました。この時点で、20時は軽く過ぎて、22時ぐらいだったのではないかと思います。

仕上げ

ゲームバランスの調整、画面の調整など。

ビルドすると、エディターとは明るさなどが変わってしまうので、最終調整はビルド後のもので確認する必要がありました。調整が終わり、あとはWebGLにビルドして登録して終わり!と思ったところで、こんな症状が発生。

WebGLだとセミが少ないことに気付いて、調べると階段を通り抜けて下に落っこちていることが判明。フレームレートが低いからか、当たり判定が大雑把になるらしく、階段モデルの板ポリゴンでは通り抜けてしまっていた模様。仕方ないので、階段のサイズのCubeを作って配置したことで直りました!

ビルドをしつつ、動画やスクリーンショット、文面を作って、公開完了したのは朝の4時半すぎでした。

フリーズバグ修正

当たり判定方法をCubeに変えたことで、足が引っかかってゲームが進まなくなる致命的なバグが入っていました。夜も明けてきていたし、セミが床抜けしないことだけ確認して安心してしまっていました。

コライダーの形状をBoxからCapsuleにして解決して、すでに更新済みです。ご報告いただいた【なかなか】様、ありがとうございました。

まとめ

いつも、完成形が見えそうで見えないぐらいの進捗の時が精神的に厳しいですが、今回はより厳しかったです。TLで面白そうだったりセンスのよい画面が流れてくると、中途半端なものを完成させる労力に意味はあるのか、という疑問が湧いてきます。他にやることがあったら、今回は諦めていたかも。しかし、他にやることは無くはなかったものの、それはそれで手を付けるのが面倒くさい。ということで、ジリジリと作業を進めていたら、トンネルを抜けて完成形が見えるところまで進められました。

出来上がってみれば、得るものはちゃんとありました。Unity2017.1のWebGLビルドの環境ができましたし、Blender3Dでなんとなくモデリングができましたし、Post Processing Stackをスクリプトから制御する方法も分かりました。当たり判定で苦労したことも今後に活かせそうです。

前回の記事に書いた今回のテーマは以下の通りでした。

  • ピンポイントでコンパクトに勝負
    • → Post Processing Stackで雰囲気のある画面を作って、あとはルールや動作をシンプルにした
  • 画像アイコンを工夫する
    • → 最初の公開時に動画GIFを作れた
  • ScriptableObjectの理解を深める
    • → 完了済みで、今回、少し使えた
  • 操作するものでステージを変化させる
    • → これは今回できず

ステージを変化させるという以外は、ほぼできていました。

次回に向けて

今考えている、次回のテーマです。

  • 2Dものにする
  • ステージを変化させる
  • MagicaVoxelかLeoCADで作った画像をアニメーションさせる方法と、ドット絵にする方法を調査
  • ピンポイントでコンパクト勝負は継続
  • プレイヤーが遊びたいと感じるものにする

そろそろ、Phaserの教科書作りを本格化したいので、そのためのサンプルにできるものを検討したいです。そのためには、グラフィックが重要。MagicaVoxelやLeoCADを調べたいところです。

企画についてちょっと追記(8/2)

開発面での成果はありましたが、企画は失敗でした。プレイヤーが遊びたい、体験したい、というものにしなければならないのに、インパクトに引っ張られて、日常であまり体験したいとは思えない状況を作ってしまいました。作り手の典型的な自己満足系の企画になってしまいました。

次回は気を配りたいところです。

今回お世話になったアセットやプログラムなど

今回も、様々なアセットやツールのお世話になりました。ありがとうございました!

LenovoE440にm.2 ssdを追加

Windows7のLenovoE440のHDD容量が不足してきたので、m.2 ssdスロットにSSDドライブを追加して増設しました。

購入したのはこちら。アマゾンが販売しているものを購入しました。

Transcend SSD 128GB M.2 2242 SATA III 6Gb/s TS128GMTS400

Transcend SSD 128GB M.2 2242 SATA III 6Gb/s TS128GMTS400

取り付け

ハードウェアの取り付けは、こちらを参考にして裏蓋の取り外しや、【M.2スロット】の場所を参考にしました。

pc9800.blog19.fc2.com

裏表を間違えても取り付けられそうなので気をつけてください。SSDの製品写真の向きが表になります。斜めにしっかりと差し込んでからネジでとめます。ネジは用意してなかったので、HDDを固定していたネジを一つ外して代用しました。

セットアップ

取り付け終わったら、SSDを使えるようにします。Windows7にはm.2 SSD用のドライバーがインストールされていないとのことだったので、以下にしたがって、KB2990941をダウンロードして、インストールしました。

comp-lab.net

インストールしたら再起動をして、ディスクの管理を開きます。

スタートメニューから[コンピューター]を右クリックして、[管理]をクリックします。

f:id:am1tanaka:20170715182808p:plain

[ディスクの管理]をクリックします。

f:id:am1tanaka:20170715183121p:plain

ここからは、以下を参考にしました。

tetsunarijp.hatenablog.com

ざっとした流れは以下の通りです。

  • ディスクの初期化ウィンドウが表示されるので、マスターブートレコードか、GPTのいずれかを選んでOK
  • 追加したディスクが「未割り当て」なので、フォーマットと割り当てをします。右クリックして、「新しいシンプルボリューム」を選択します(この画像はすでにフォーマット済みなので「未割り当て」とは表示されていません) f:id:am1tanaka:20170715183627p:plain
  • ドライブは好きなものにします。[F]や[G]は外付けでよく利用するので避けて[O]にしました。この辺りはお好みで
  • フォーマットはデフォルトのままやりました

まとめ

以上で、利用できるようになりました。USBメモリーじゃないから、接続するだけじゃ動かないんですね。

300GByteだったところに128GByte増えたので、これでWindows7のサポート切れまで延命しようと思います。

Unity1週間ゲームジャム「積む」に参加しました(学生さん作品追記!)

2回目の参加でした。登録した作品はこちら↓

Unity Star Dust!

ユニティちゃんライセンスロゴ

この作品はユニティちゃんライセンス条項の元に提供されています

目次

参加目的

今回は以下のような目的で参加しました。

  • 学生さんの参加意欲の鼓舞
  • 前回の反省点を活かす
  • 新たな課題を見つける
  • 講義の役に立つ内容にする

ツイートで振り返る一週間

前回、やりたいと思った経過のツイートをしたので、それを交えつつ振り返ります。

6/19(月)

初日。お題が発表される前から、ベクトルや回転を練習できるゲームを作りたいと考えていて、少し準備していました。「前回の反省は無視して」というのは、少しの操作で画面を大きく動かすという企画的なことです。

内容は、Code.orgのマインクラフトの学習ソフトの3D版のようなもので、こんな画面を作ってみました。第2回の時に発表されていた、すしさんの「ころがり勇者」の雰囲気が好きだったので、構図や色を真似てみていました。

最初は、コマンドを「積んで」、スタックやキューの概念も含めることができるかな?と考えていたのですが、コマンドブロックを作って、積むのを実装して、その上でベクトルや回転を活かしたステージ作りとなるとちょっと大事です。また、ルールも煩雑になりそう。このネタは別でも活かせるので、今回無理やり作ることはなかろうということで保留することにしました。

「積む」というお題で思い浮かんだのがNS-TOWER。乗ったらブロックが落ちて積んでいけばいいかな?と。それで作ってみたのがこの画面です。これはこれで綺麗でしたが、背景が青空なのは前回やっていて、SkyBoxはどうも鬼門のように感じていたので今回は黒くしようと思ってました。

作業は講義後の夜からでしたが、予め用意していたプロジェクトを使ったことで、核となる部分の動きを実装できました。前回から大きな進歩です。

この時点で、画面を暗くして、音符みたいなものが光ながら飛んで、UNITE IN THE SKYを流して、ダンスしながらジャンプしていく、という今のイメージが頭の中にありました。レーザーの演出を移植したり、曲に合わせて背景を変化させることも思い浮かべてはいたのですが、そこまでは手が回りませんでした。

6/20(火)

カメラの制御に、耳に挟んでいたCinemachineを使ってみました。新しい環境を試すチャンスが増えるのもゲームジャムのいいところですね。自分の環境がまだ5.6だったので、Timelineは使えません(多分)。アセットストアからCinemachine Base Rigをインポートして、付属のサンプルシーンを見て使い方を調べました。アセットやオブジェクトを設定して、あとは切り替えたいタイミングで指定のバーチャルカメラを有効にすればいいので楽でした。

WebGLで音楽が鳴らなかったのは古いIEが立ち上がっていたからだったようで、通常のブラウザーに戻したら問題はありませんでした。

6/21(水)

この日は一日講義。午後の2年生の講義は、各自で作業を進めてもらいつつ、興味のある人はユニティちゃんのアニメーションの制御の組み方を見てもらいました。

ということで、この日はユニティちゃんにダンスをさせて、ジャンプ時にはジャンプのモーションに切り替えるなど、ほぼユニティちゃんの動きで終わり。それにしても、モデルのクオリティが高く、歌や声もあるユニティちゃんの存在は本当にありがたいです。

6/22(木)

水曜日の講義のまとめや、金曜日の準備で時間がかかり、それほど作業時間が取れない日でした。

音符の出現データの作り方に詰まってしまい、考えがまとまらないまま終わってしまいました。当初の目論見では、この日にステージデータを作って、あとは仕上げるだけに持って行きたかったのですが・・・。

6/23(金)

午後は講義のため池袋。午前と夜に作業しました。

音符の動きや出現方法がとっ散らかったままで先に進められそうになかったので、とにかくゲームとして完成させました。寝る時に出現データを作るイメージが降ってきました。残すは2日。

6/24(土)

この日は夕方から2年ぶりぐらいの友人たちとの会食があったので、作業は日中と帰宅後。

昨晩に思い浮かんでいた手順でスムーズに作業が進んで、無事にイントロ部分が作れました。

6/25(日)

最終日。Unity Cloudで躓いたり(Unityを再起動して直る)、Unityが不安定になったりと、締め切りらしいトラブルが発生。

結局、Unityの再起動で直りましたが、何か役に立てばと記事をアップ。

ステージデータ作成と、細かい部分の補足をして、ついに完成!画像イメージは締め切り間際にどたばた作って、ロゴはパワポで作るという荒業を^^; 最後のところは前回より準備不足になってしまいました。

20時をもって、一先ず完成!

お疲れ様でした!

気づいたこと・反省

企画について

企画関連の自分のツイート。ツイートを見ていて自分が楽しく感じたのが、面白い動きをしていたり、これはどうなるんだろう?と感じるものでした。1週間の作業時間なのだから、実験的でインパクトのあるものに挑戦して、新境地を開拓するのもいいなと思いました。

画像アイコン

今回は前回以上に失敗しました。準備も構想もしないまま、慌てて締め切り直前にでっち上げる始末。作品の顔であり、ここがちゃんとしていないとなかなか見てもらえません。これはどんなサービスにも共通すること。昔からずっと苦手な部分でしたが、モロに露呈してしまいました。

今、ようやくちゃんと作り直しました。画面サイズや作る手順も確認したので、次回はちゃんとせねば。

レベルデータの作成

今回最も苦戦したのが音符の出現データの作り方でした。音楽の進行に合わせて音符を出現させますが、プレイヤーがどの高さにいるかは毎回違います。座標を使った出現方法は使えませんので、準備していたTiledによるステージ作りの環境が使えなくなってしまいました。

こんがらがった時は、原理原則に戻るのが一番。最も簡単な音符の動きをまず1つ作り、それを出現させるためのオブジェクトを作って、それをプレハブ化して、と、ボトムアップで作ることで決着できました。

今回はゲームオブジェクトで実装しましたが、ゲームオブジェクトにデータを持たせると、プレハブに接続したまま作業をするのが危険になります。うっかり[Apply]すると、他のオブジェクトに意図しない変更が伝わってしまうためです(実際に一回やらかして、特定のパターンの全ての出現データが吹っ飛びました)。配置したオブジェクトはプレハブから切り離すようにしましたが、これだと全体に反映させたい変更は、個別に設定しなくてはならなくなります。ScriptableObjectを使うべき状況かな?と感じていまして、後日調査します。

利用したアセット

今回も沢山のアセットによって、楽しくゲーム作りができました。作者の皆様、ありがとうございました。

次回に向けて

次回のテーマは以下のものを考えています。

  • 破天荒な実験的な企画にする
    • 無難な作品は2つ作ったので、次はゲームジャムらしく挑戦的なものにしてみたいなぁと。次回は作業時間が取れなさそうな見込みもあり、より、ピンポイントでまとめたいです
    • 実験するテーマとなる技術か、アセットを見つけるのもテーマです
  • 操作するものでステージを変化させる
    • よい作品の多くがこの形式でした。自分の作品はタイミングだけで、積み方はゲームに関係しませんでした。そこが、ダイナミックさに欠けた理由のように感じました。自分が操作するものでステージが出来上がり、それによりゲームが左右されるルール。それに破天荒さを加えられれば、プレイヤーの操作でゲームを大きく変化させるという前回感じた課題も解決できるかもしれません
  • 画像アイコンを工夫する
    • とりあえず、解像度や作業手順のリサーチは済ませました。次回こそは最初からちゃんとしたものを出さねば・・・。つい、手を抜いてしまうところなので、一番大きなテーマかも・・・
  • ScriptableObjectの理解を深める
    • 次作品に使うかは不明ですが、単純に気になっているので勉強したいです

今回までに根本的な課題はかなりやっつけたので、項目がぐっと減りました。

まとめ

2回目ということもあり、前回のような疲労感はありませんでした。前回の反省点がかなり活きたので、参加して良かったという手応えがあったのも大きいと思います。

再生数も評価もまだまだな状態ですが、評価のよい作品を遊んでみると、確かに違いを感じます。評価を得ている作品は、評価に相応しい強みを持っています。同じ期間で作られたものなので、企画やセンスによる差がよく見えるのがゲームジャムの良いところ。自分の課題が見つけやすいです。

常に武器を入手し、研ぎ、鍛錬して、常在戦場の精神でいることの大切さを今回も感じました。参加したことによって得られた経験を大事にして、次回に活かそうと思えば、再生数や評価がそれほどでなくても、あまり気にならなくなります。寧ろ、伸び代があるということなので、次にどんなことができるか、楽しみが増えるように感じます。

追記:学生さん作品(2017/7/5)

最後に。最も重要な目的である学生さんの作品ですが、多分まだ登録されていません^^; 見つけられなかっただけだろうか。作品があることは先週確認したし、ビルドや登録手順も改めて紹介したのだけど、はてさて・・・

これ書いた時点で一本出ていて、本日もう一本登録されました!以下の2本です。

詩音君作 / レトロゲームシリーズ1

レトロゲームシリーズ1 | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

登録済みだった作品。テトリス的なやつです。画面見ていましたが、綺麗にまとまっていて却って見落としてました^^; MixModeが面白いです。絵が描けるのでシンプルでセンスがいいです。

kht君作 / bouncetower

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

落下してくるモノを、棒を傾けて跳ね返すというRigidbodyを活かした作品。個人的な一番の気に入りポイントは効果音。

今日までトラブルで登録できませんでした。Google Chromeが悪さしていたのか作品登録ができず、Firefoxでやってみたらうまくいきました。この辺りを自力で解決できるようになればまた一歩前進と思います。

追記のまとめ

2回目で、2作品登録に漕ぎ着けられました!よかった。就活があるので継続できるか不明ですが、今回の反省を活かして締め切りに間に合わせることができれば力は確実に付きますので、もう少し続けて欲しいです。1年生にも参加できそうな力量の学生さんがいるので、夏休み明けから参加を促そうと目論んでます。

作品が増えれば、バズる確率が上がるので僕の負担も減るのでありがたいのです。僕はポケモンで言えばジムリーダーなので、力を付けて追い抜いて欲しいです。

Unity1週間ゲームジャムのページの画像サイズメモ

Unity1週間ゲームジャム( https://unityroom.com/ )のアイコンやスクリーンショットについてのメモです。

概要

画像のサイズは、ブラウザーの幅によって様々に変化します。最大になるのは、幅を768ピクセルより狭くした時で、1列表示になるので600ピクセルを超える幅になります。

768ピクセルよりも幅が広くなると3列レイアウトになるので画像は小さくなります。1366ピクセルぐらいだと、280ピクセル辺りが最大幅でした。2Kぐらいの解像度を想定すると、幅は400ピクセルを想定しておけば十分そうです。

アスペクト比

イコン画

表示される場所によって、アイコン画像は1:1になったり、16:10になったりします。タイトルなどは、16:10になった時にも表示されるように配置した方がいいかも知れません。縦画面の作品だとちょっと難しいですが。

スクリーンショット

ゲーム画面に表示される最大5枚のスクリーンショットは、アスペクト比はアップロードした画像のものが維持されて、幅がブラウザーの幅によって制約を受けます。

幅は、こちらも256~400px程度で作成しておけばよさそうです。

イコン画像の作成

GIFアニメならアニメできます。480x480pxの2MByte程度のファイルはアップロードできました。

試行錯誤した結果、自分は以下のような流れで作ることにしました。

スクリーンショットの録画

高フレームレートで録画できるので、動画編集ソフトのFilmoraを使いました。

編集

Filmoraで必要な場面だけ切り出して、タイトルのテキストを重ねました。タイトルを常に表示したい場合は、黄金比にした時に画面に収まる場所に配置する必要があります。

GIFアニメ出力

これもFilmoraを使いました。サイズは720x480px、フレームレートは24fps。

GIFアニメのトリミング

出力したGIFアニメをGIMP2に読み込んで、キャンバスサイズを調整しました。動画の一部を切り出す場合も、GIMP2でやるのがよさそうでした。

調整を終えたら、[フィルタ]>[アニメーション]>[GIF最適化]を行い、[ファイル]>[エクスポート]から[GIF]を指定して保存しました。途中で枠が大きいという警告が表示されるので、[切り取り]を選択すると先に進められました。

以上で完成です。

スクリーンショットの作成

スクリーンショットは幅256ピクセルを基準に考えればよさそうです。Filmoraで動画からスナップを取得すると解像度が下がってしまうので、こちらはScreenpressoを使いました。

Screenpressのスナップショットも少し癖があって、一時停止したところのスナップを撮影すると、1フレームずれてしまいます。静止させたものをスクリーンショットで撮影するか、再生位置をマウスで操作してから撮影するかします。

以上です。必要な画像の解像度がそれほど高くないので、縦画面レイアウトでも、WebGLでビルドしたもので問題なさそうでした。一日の作業終了時に作成しておくと、最終日に慌てなくて済みそうです。

ParticleのstartColorをスクリプトで変更する

Unity5.6だとパーティクルのstartColorが古くなっていると警告されたので、新しい設定方法です。

GetComponent<ParticleSystem>()はなく、ParticleSystem.MainModuleGetComponent<ParticleSystem().mainインスタンスを変数に取り出して、そのstartColorに色を設定すればいけました。

例えば、開始時にパーティクルを赤くしたい場合は以下の通り。

    void Start () {
        ParticleSystem.MainModule par = GetComponent<ParticleSystem>().main;
        par.startColor = Color.red;
    }