駄作でもいいから一回自分で仕様考えてゲーム作ってwebで公開してみたい。。と思ったんでUnityChan（フリーで使えるUnityの公式キャラ）の3Dモデルを操作して敵キャラと雪玉をぶつけあう3Dゲームを作ってUnity Playで公開してみた。
公開はUnityで作ったものをWebGLにbuildしてmacでコマンド叩いてzipにしてUnity Playにドラッグアンドドロップでアップしたらそれで終わった。よくできている。。
なんかゲームっぽくはなったけど遊んでて楽しくはないかな。難しい
とりあえず素振り的にもう何本か作りつつ3Dモデル、イラスト作成ツール使って簡単でも自分で素材作れるようにしつつちゃんと面白いもの作れるようになりたいな。
ノンフィールドRPG、ゾンビ系FPSの開発講座に続いて2Dシューティングゲームを開発する講座受講してみた。
Unity公式のチュートリアルを元に作った講座らしい。使ってる素材は同じだけど成果物は違うっぽい。
できたもの
ECSで動かしてるFageteにECS Execで入りたい場面がちょくちょくあるんだけど毎回クラスタ名とタスクID、コンテナ名を貼り付けてコマンドを作るのが面倒だった
aws ecs execute-command \
--cluster <クラスタ名> \
--task ＜タスクID＞ \
--container ＜コンテナ名＞\
--interactive \
--command "/bin/bash"
例えばRailsのサービスを2つ運用していてそれぞれのサービスの構成が
みたいな状況だと結構面倒。タスクIDは管理画面に確認しにいくか別途コマンド叩いて調べないといけないし。
なのでシェルスクリプトで接続先のクラスタ、サービス、コンテナを選択できるシェルスクリプトを作ってみた。
aws-cliコマンドでクラスタ、サービス、タスクID、コンテナの情報を引っ張ってきて後はjqやaws、sedで必要な部分地道に切り取ってく感じ
#!/bin/bash
echo ECSコンテナに接続します。クラスタ、サービス、コンテナ名を選択してください。
echo
echo ? クラスタを選択してください
echo
CLUSTER_NAMES=`aws ecs list-clusters --output text \
| awk -F'/' '{print $2}'`
select CLUSTER_NAME in $CLUSTER_NAMES exit
do
if [ "$CLUSTER_NAME" = "exit" ]; then
echo 処理を中断します
exit 0
fi
break
done
echo
echo $CLUSTER_NAMEが選択されました
echo
echo ? コンテナを選択してください
fi
echo
SERVICE_NAMES=`aws ecs list-services --cluster $CLUSTER_NAME --output text \
| awk -F'/' '{print $3}'`
select SERVICE_NAME in $SERVICE_NAMES exit
do
if [ "$SERVICE_NAME" = "exit" ]; then
echo 処理を中断します
exit 0
fi
break
done
echo
echo $SERVICE_NAMEが選択されました
echo
TASKID=`aws ecs list-tasks \
--cluster $CLUSTER_NAME \
--service-name $SERVICE_NAME --output text \
| awk -F'/' '{print $3}' | head -1`
CONTAINER_NAMES=`aws ecs describe-tasks --cluster $CLUSTER_NAME \
--tasks $TASKID \
| jq '.tasks[0].containers[].name' \
| sed 's/"//g'`
echo ? コンテナを選択してください
echo
select CONTAINER_NAME in $CONTAINER_NAMES exit
do
if [ "$CONTAINER_NAME" = "exit" ]; then
echo 処理を中断します
exit 0
fi
break
done
echo
echo $CONTAINER_NAMEが選択されました
echo $CONTAINER_NAMEに接続します
echo
if [ `echo $CONTAINER_NAME | grep 'nginx'` ] ; then
SHELL_PATH="/bin/sh"
elif [ `echo $CONTAINER_NAME | grep 'demoa_service'` ] ; then
SHELL_PATH="/bin/ash"
elif [ `echo $CONTAINER_NAME | grep 'demob_service'` ] ; then
SHELL_PATH="/bin/bash"
else
echo "error unexpected container"
exit 1
fi
aws ecs execute-command \
--cluster $CLUSTER_NAME \
--task $TASKID \
--container $CONTAINER_NAME \
--interactive \
--command $SHELL_PATH
こんな感じで動く。実行サーバはaws-cliのver2が入っているEC2でbashで呼び出す想定。
bash ecs_connection.sh ECSコンテナに接続します。クラスタ、サービス、コンテナ名を選択してください。 ? クラスタを選択してください 1) demoa-service-production 3) demoa-service-development 5) demoa-service-development 2) demoa-service-demo 4) demoa-service-production 6) exit #? 3 demoa-service-developmentが選択されました ? コンテナを選択してください 1) demoa-service-development-app 3) exit 2) demoa-service-development-batch #? 2 demoa-service-development-appが選択されました ? コンテナを選択してください 1) demoa_service_development_app 2) demoa_service_development_nginx 3) exit #? 2 demoa_service_development_appが選択されました demoa_service_development_appに接続します
UdemyでUnityを使ってバイオハザードみたいなゾンビ系FPSを作成する講座を受講してみた。
ノンフィールドRPGに続けてUnityの講座を受講するのは2つ目。
ノンフィールドRPGを作成するオンライン講座を受講してみた - yikegaya’s blog
こんなの
今回もセールで買ったんで1400円くらいで7時間の講座の割には結構それっぽいものできたし学びにもなって満足。
3Dモデルは「Mixamo」、地形のテクスチャは「TextureHaven」、サウンドは「SONNISS」というサイトで無料配布されている素材を使った。
今回初めて3Dゲームの開発体験してみたけど
に関しては自分で書いたプログラムでどうこうするUnityエディタ上の操作でほとんと作れるっぽい
地形はUnityエディタ上で「Terrain」という3Dオブジェクトを作ってそこから山や木を生やしたり地形の表面にテクスチャ貼ったりをフォトショでブラシを塗るような感覚で作っていける。ちょっとビビるくらい簡単で便利。
3Dオブジェクトに関しては「Mixamo」からダウンロードした時点で大分ゲームに組み込むための仕組みができていてそこがどう作られたのかは謎。「Blender」みたいな3DCG制作のソフトを使って自分で何かしら作ってみないと理解できないかも
MixamoからダウンロードしてUnityにインポートした時点でアニメーションが既に入ってる。例えばプレイヤーの3Dオブジェクトなら弾の装填とか銃を構えるアニメーション、ゾンビなら攻撃したり走ったり倒れたりする時のアニメーションが既に用意されていて、例えばフィールド上でゾンビを動かそうと思ったらUnity開発者は以下の挙動をプログラムすればいい
アニメーション自体も3Dモデルの足や腕をプログラムで操作するのかな。。と思ってたけど少なくとも今回はそうではない
最後まで動画見て同じようにUnityエディタ操作してC#スクリプト写経したはずが何故かバグが残ってしまった。
この辺りは後で直したいが。。別のUnity講座もう買ってあるしそっちやりたいんで一旦放置
Unityでゲーム作ってみたいと思い、Unityを使ってノンフィールドRPGを作成するUdemyの講座を受講してみた。 www.udemy.com
2021年現在ゲームエンジンの人気はUnityかUnreal Engineの2択っぽい。以下Unreal Engineと比較しての選定理由
というような理由でとりあえずUnityに手を出してみることにした。
講座内ではAndroidアプリとして公開すること前提に進めるけど、build設定をWebGLにしてブラウザで動かしてみた
Mac Book ProでOSはBig Surの環境で構築してみた。
Unity HubというUnityの複数バージョン管理するツールでUnity2020をインストールしてみる。
で、プロジェクト選択して立ち上げたら「「The project you are opening contains compilation errors. ...」みたいなエラーが出て言われるがままSafe Modeで立ち上げたらコンソールにエラーマークが出てるけど具体的なメッセージが出てこない。。
Safe Mode無視してそのまま立ち上げたら普通に動いたんだけどなんか気持ち悪いな。。
とりあえずエラーが出たのは初回だけでその後は普通に動作してそう。
Udemyで買った講座を参考にDOTWeenというオブジェクトにアニメーションを追加するためのライブラリをインストールしたらコンパイルエラーになったがPCごと再起動したら直った。Unityだけ再起動してもダメだったんだけどこれもなんだったんだろう。Dockerコンテナいくつも立ち上げっぱなしにしてたりもしたんでリソース不足だったのか？
この講座はAndrioidを想定して作られているけど自分としてはWebGLで自作のブラウザゲームを作って作って公開するのが第一目標なのでbuild設定をWebGLにして受講してみた。ただその場合は以下２点講座の内容と別に対応が必要。
とりあえずクイズゲームみたいなシーンとテキスト、画像の遷移と最適源のエフェクトやアニメーションのみで作るゲームは自作できそうだけどもう少し凝った2Dゲーム（フィールド付きRPGとかレースゲームとか格闘ゲーム）を作るにはもう少しインプットの時間必要かな。。
あとUnityは3Dゲームも作れるけどそっちは全然わかってないので別途調べてみたい。
最近新規で作ったRailsサービスのデプロイ作業してたら認証周りの対応が地味に面倒だったので対応メモ。
前提
まずデプロイしたらロードバランサ（ALB）のヘルスチェックで落ちるようになった。これは心当たりがあってrailsのconfigが原因で例えばrspecを起動する時にapplication.rbかtest.rbに以下の指定をしないと落ちる
config.hosts << "www.example.com"
ので本番環境もconfig.hostsの指定をしてないせいで、ロードバランサからのリクエストを拒否してしまってたのが原因とは気づいたけど、これどうやって許可するのかで迷った。
とりあえずconfig.host.clearと設定してしまえば通るんだけどなんか違う気がする。。
で、調べたらNginxでヘッダに許可するhostを指定する方法があってこれが良さそうだったのでこの通りに対応して通した。
Rails6のActionDispatch::HostAuthorizationとELBのヘルスチェックの共存 - Qiita
これでヘルスチェックが通ってECSが動いたんだけど、その後適当なJSON投げて動作確認しようとしたら401が返ってきて通らない。CloudwatchはRailsとNginxでそれぞれロググループを作っていたんだけど、Nginx側のロググループにのみ401エラーが出ていてRails側には出力が何もない。
ってことはNginxの認証で落ちていてRailsに届いてないのでは？？と思ってNginxの設定ファイルを見返したけどどう見ても問題なさそう。
それで試しにRailsのJWTの認証外してみたら通った。結局JWTがHTTPリクエストのAuthorizationのHeaderの鍵が間違っていたのが原因だったらしい。
じゃなんでRailsのログがCloudwatchに出てないんだ？？と思って調べてたらconfigの設定でログが標準出力に出ていなかったのが原因だった。
config/environments/production.rb
if ENV["RAILS_LOG_TO_STDOUT"].present? logger = ActiveSupport::Logger.new(STDOUT) logger.formatter = config.log_formatter config.logger = ActiveSupport::TaggedLogging.new(logger) end
HTMLで画像のみ受け付けるフォームを以下のように作って検証していたらAndroid端末でエラーが出るようになった。
<input type="file" accept="image/*">
スマホ端末だと上記のタグをつけた場合に保存されている写真をアップロードするのではなくカメラアプリを起動させて撮影した写真をそのまま送信できるんだけど、そうするとHuaweiのAndroidでエラーが発生した。
で、調べたら対象の写真がHEIC形式（HEIF形式）でHTMLの"accept=image"がHEIC形式に対応していないのでエラーになっていたっぽい。
iPhoneで撮影した写真もHEICだけどiPhoneの場合はinputタグからアップロードする場合JPEGに勝手に変換してくれているらしい。自分はiPhoneユーザなのでここで差分があって気づかんかった。
今回は上記のフォームから写真をバックエンドにpostしてからS3に送信したかったんだけど機能要件的にaccept="image"を外してサーバサイドでバリデーションかければいいよね。というかよく考えたら写真以外も扱える機能にしてもいいじゃん。という話になったけど、これ気づきにくいな。検証者がiPhoneユーザしかいないと辛い