おもちゃバコ

主に趣味について

Unity: 2D Pixel Perfect Cameraを使ってレトロゲームを再現したい

こんちは

Unityで「レトロゲーム風を再現するためにはどうすんの?」を調査しました.


参考文献

まずはこれを読みましょう.
blog.unity.com


スプライトの設定

16×16のスプライトをUnityにそのまま持ってきて,拡大するとボケますよね.
f:id:lambda410:20220122163300p:plain

そこで,Inspectorの
・Filter Mode -> Point(no filter)
Filter Modeは標準だと「Bilinear(バイリニア補完)」がかかっているので,補完しないようにします.

・Compression -> None
また,Compressionは標準だといい感じに圧縮しようとするので,圧縮設定を切ります.

にすると,スプライトの味をそのまま生かせます. f:id:lambda410:20220122163655p:plain


2D Pixel Perfect Camera

次は画面の解像度をいじります.

Package Managerから2D Pixel Perfectをインストールします.
f:id:lambda410:20220122164000p:plain

これはピクセルパーフェクト対応のカメラを簡単に作るためのものです.

ピクセルパーフェクトは人によって説明の仕方が変わりますが,ファミコン時代の画面を再現するためのもの位の認識で大丈夫です(適当).
気になる人は復刻盤のファミコンゲームが収録されているゲームは大体設定できるようになっているので試してみてください.
(↓ ゲーム開発的には,このサイトで説明されている内容が重要です.)

https://aibars.com/mini-famicom-pixel-perfect

Main CameraにPixel Perfect Cameraをアタッチします.

大まかな設定項目についてです.
f:id:lambda410:20220122173130p:plain

1 Assets Pixel Per Unit
Unity世界の1ユニットのサイズです.
今回は16×16を1マス単位にしたいので「16」を設定しました.

2 Reference Resolution
アセットを表示する解像度のことです.
ファミコン風にしたいので「256×240」にしました.
(ちなみに「256x224」説もあるみたいです.)

注意点として,あくまで「アセットを表示する解像度」の設定なので画面の解像度を設定しているわけではありません.
いい感じに画面に合わせてアスペクト比を変更してくれるわけではないです.

解像度「256×240」に1PPU「16」を横に「16」個突っ込めますって設定です.

3 Upscale Render Texture
基準解像度に近い解像度で描画してくれます.
設定すると画面全体を使ってくれるらしいです(?)

4 Crop Frame
設定すると余った余白を黒で塗りつぶしてくれます.
ファミコン移植作品でそのゲームのラベルが設定されているやつみたいなのです.
f:id:lambda410:20220122173041p:plain

5 Stretch Fill
Crop FrameをXY両方設定すると出てきます.
有効にするとアスペクト比を維持したまま拡大してくれます.
が若干ボケます.
f:id:lambda410:20220122173100p:plain

カメラの緑線について

Sceneのカメラについて補足です.

緑の太線が「画面サイズ」.
緑の破線が「Reference Resolution」です.
f:id:lambda410:20220122173226p:plain

スマホの画面に合わせて拡大したいみたいな要望はこの辺を設定してあげると良さそうですね.
多分スクリプトでできるのかな?

面倒だと思う人は「Stretch Fill」を使うのが良いと思います.
簡単だしね.


まとめ

レトロゲームを再現するのも簡単ではないね.

Unity: トランジションを利用して画面遷移を作る

こんちは

RPGのエンカウント演出とかってUnityでどうやって作るのか調べました.
(フェードイン/フェードアウトってやつです.)
そのときの備忘録です.


参考文献

ルール画像(マスク画像?)はこちらのサイトで配布されているものを使用しました.
4you.bz


開発環境

Visual Studio Code 1.63.2 (ShaderToy拡張機能)
Unity 2020.3.25.f1
Windows 10 Home 21H2


トランジションとは

場面切り替え用の演出のことです(多分).
pangaea.top

ゲームだけでなく映像作品にもよく使われていますね.


原理

ルール画像と呼ばれるモノクロ画像の画素値を利用して演出を作るみたいです.

画素座標(X,Y)における元画像の画素値をA,ルール画像の画素値をB,閾値の画素値をTとすると,

B < T ならば 0
B >= T ならば 1

をAに乗算すればいいのではないかと思います.

ShaderToyで実験

我流なので正しいかは分かりませんが,とりあえずShaderToyで実験してみました.

他にもやり方はあるっぽいですが,簡単なので今回はこれで行きます.

ルール画像は参考文献のを使用しました.
元画像は画像処理で有名な人です.

f:id:lambda410:20220107230032g:plain

なぜか画像を保存すると黒くなるはずの箇所が白いんですよね.
勘違いしているのかなぁ.


じゃあUnityではどうやるの?

本題のUnityです.

Unityのイロハが分からないので先人達を頼ります.
blog.cfm-art.net

シェーダーを使ってアルファ値でうんぬんするみたいですね.

前準備

フェード処理を作ってみます.

とりあえずGUIトランジションするために必要なものを用意.

  1. Unlit Shader
    光は関係ないのでこれで良いはず.

  2. Material
    シェーダーをアタッチします.

  3. Imageを付けたCanvas
    初期状態だと小さいので,画面全体にサイズを変更します.

f:id:lambda410:20220109132646p:plain

シェーダ1

手始めにアルファ値をいじってみます.

透明にするために以下の設定をします.

Blend SrcAlpha OneMinusSrcAlpha

docs.unity3d.com

UNITY_APPLY_FOGはいらなそうなのでコメントアウトしました.
あっても大丈夫だとは思いますが.
light11.hatenadiary.com

実行結果1

アルファ値をスライダーで変更しています.
これだけでもフェードイン/アウト出来てそうですね.

f:id:lambda410:20220109142042g:plain

シェーダ2

次はルール画像を使用してみる.

ソースコードのアルファ値を閾値として,ルール画像の画素値と比較する方針で行きます.
ShaderToyの奴と同じ感じです.

ルール画像はモノクロなのでRGBのどの値を使用しても良いです.
あと,閾値の範囲を[-1.0f, 1.0f]にして計算結果を[0.0f, 1.0f]になるように調整しました.

シェーダのTextureにルール画像をセットするのを忘れずに.
f:id:lambda410:20220109140009p:plain

実行結果2

ルール画像の通りになってますね.

f:id:lambda410:20220109142141g:plain

出力にルール画像のRGB値を使用しているので変な感じですが,returnを変更すれば色も変えられます.

// 黒のフェードアウト
return fixed4(0.0f, 0.0f, 0.0f, output);

f:id:lambda410:20220109142351g:plain


まとめ

トランジション処理で表現の幅を広げよう!!!

Unity: アスペクト比を固定する方法を考える(2D/縦持ち)

こんにちは

Unityでスマホ用の2Dゲームを作る際にアスペクト比はどうするんだろうと思って調べました.
今回はその時の備忘録です.

カメラは平行投影(Orthographic)を対象としているので,透視投影でも使えますが見栄えが変わるかも...
また,スマホ縦持ちを想定しています(横持でも考え方は一緒のはずです).


参考文献

ほとんど参考にさせていただきました.
pengoya.net


開発環境

Unity 2020.3.25.f1
Windows10 Home 21H2


Orthographic Sizeとは

アスペクト比の固定はOrthographic Sizeを弄ることで実現します.

Orthographic Sizeとは,画面縦半分に何Unit入るかです(多分).

The orthographicSize is half the size of the vertical viewing volume.
The horizontal size of the viewing volume depends on the aspect ratio.

docs.Unity3D.com

docs.unity3d.com
ogamita777.hatenablog.com


スクリプト

メインカメラにアタッチするスクリプトです.

特に解説することは無いのでプログラムコメントに書いておきます.

画面サイズ変更時の処理

画面サイズ変更はUpdate()で解像度を見張ることで実現しています.

画面サイズ変更用のコールバック(イベント)はまだなさそうです(?).

answers.unity.com
stackoverflow.com

注意点

メインカメラのSizeはあらかじめターゲットとする解像度のサイズに合わせておいた方が良いです.

スクリプトを実行したときに設定されるSizeに変更するとSceneを弄るときに楽です.
f:id:lambda410:20211231115759p:plain


追記(22/01/04)

上のコードだと解像度によっては上手く固定されないことが発覚しました.

以前アスペクト比を無理やり固定したことがあったので,その時のソースコードを共有します.
アスペクト比は固定されますが,上下の余白にゴミが表示されたかも.


まとめ

縦持ち用のアスペクト比固定について考えてみました.

もしかしたらビルドしたとき余白にゴミが映るかもしれないので,次はその対策について考えたいと思います.

Unity: 旅の扉風のエフェクトを作る

こんにちは

今回はUnityで旅の扉(DQ3)に入った時風のエフェクトを作った時の備忘録です.

2Dテクスチャ用のエフェクトなので画面を歪めるわけではないです.
f:id:lambda410:20211229214933g:plain


開発環境

Unity 2020.3.25.f1
Windows10 Home 21H2


雑解説

テクスチャをsin波に従ってずらすだけです.

プログラム量も少ないので,シェーダを触ったことなくても理解できると思います.
(自分がシェーダを理解していないので.)

f:id:lambda410:20211229213812p:plain


シェーダ作成

まず,Unlit ShaderとMaterialを作成し,MaterialにShaderを結びつけます.

次にCreate Emptyで空っぽのオブジェクトを作成し,SpriteRendererを付けてMaterialに作成したのを結びつけます.

f:id:lambda410:20211229213248p:plain

ちなみにUnlit Shaderはライトの影響を受けないシェーダです(下記参考).
styly.cc

シェーダ

なんかごちゃごちゃ書いてありますが,大体はテンプレートです.

コメントで「ここ」と書いてあるところが追加したところです.
sin派でuv座標をずらしているだけですね.


スクリプト

スクリプトでシェーダの数値を変更します.

今回は10秒後に元に戻るようにしました.
かなり雑なのでここはお好きにカスタマイズしてください.


実行結果

sin波を別の曲線と合わせるとよりそれっぽくなるかもね.
f:id:lambda410:20211229214933g:plain


まとめ

シェーダとエフェクト入門として作ってみました.

シェーダ書くのは楽しいのでもう少し勉強してみようと思います.

Unity: 1時間で2Dゲームの基礎を作る

こんにちは

今回はUnityを使用して1時間(ぐらい)で2Dゲームを作るための備忘録です.
我流かつ適当なので参考になるかは...


開発環境

Unity 2020.3.25.f1
Windows 10 Home 21H2


プロジェクト設定

ある意味2Dも3Dの一部なので,プロジェクト設定は3Dで大丈夫です(暴論).
(2Dでも大丈夫だと思いますが,今回は3Dで行きます.)
f:id:lambda410:20211229152028p:plain


アセットを用意

今回はAsset Storeにある下記アセットを使用します.

ブラウザからUnity Asset StoreにアクセスしてUnityへダウンロードしましょう.
(importはUnity上のPackage Managerから行います.)

assetstore.unity.com


Tile Paletteの起動

Window>2D>Tile Paletteを起動します.
f:id:lambda410:20211229152449p:plain

Tile Paletteが表示されない人はPackage ManagerからTile Palette Editorをインストールします.
(上の画像の赤線をクリックしてインストール)
f:id:lambda410:20211229152555p:plain


Tile Palette設定

Tile Paletteを開いたらCreate New Paletteします.
設定はデフォルトのままで大丈夫だと思います.
f:id:lambda410:20211229153357p:plain

作成したらステージの基となるSpriteのPixels Per Unitを変更します.
今回は16*16のSpriteなので数値は16でオッケー(?)です.
f:id:lambda410:20211229153630p:plain

次に変更したSpriteをドラッグアンドドロップします.
f:id:lambda410:20211229154101p:plain

あとはTile Paletteの筆ボタンを選択して,画面上にステージをお絵描きするだけです.
(蛇足ですが,UnityのSceneの2Dボタンをクリックすると平面になります.)
f:id:lambda410:20211229154212p:plain


Playerを作成

ゲームの主人公を作成します.

HierarchyからCreate EmptyしてPlayerと名付けてPrefab化します.

Add Componentから
1. Sprite Renderer
2. Animation
3. Animator
4. Script
5. Rigidbody2D
6. Circle Collider2D
をアタッチ.
f:id:lambda410:20211229154743p:plain

Playerの設定

  1. Animator
    Animator ControllerをPlayer用に作成してセット.
    f:id:lambda410:20211229154847p:plain
  2. RigitBody2D
    f:id:lambda410:20211229154948p:plain
  3. Tag
    なんとなくPlayerに変更したけど,今回は意味ないです.

Playerのアニメーション

待機と歩きのアニメーションを作成します.

Pixels Per Unitを32(?)に設定してSceneにドラッグアンドドロップしてアニメーションを保存します.
(画像はRunの場合です.)
f:id:lambda410:20211229155254p:plain

Animator設定

Player用に作成したAnimator Controllerを開きます.

ParameterはInt型にしてStateと命名しました.

Stateは画像のように作成して,矢印も設定します.
このとき,Has Exit Timeのチェックを外し,ConditionにStateを設定します.
Idle->WalkはState==0, Walk->IdleはState==1にしました.
f:id:lambda410:20211229155441p:plain
f:id:lambda410:20211229155551p:plain

スクリプト

こんな感じでスクリプトを書きました.

NULLになりそうな箇所はASSERTするのがデキるプログラマ(かもしれない).


Scene設定

  1. MainCamera
    2DゲームにしたいのでProjectionをOrthographicにします.
    また,いい感じに範囲を設定します.
  2. Grid/TileMap
    TileMap Collider 2Dを設定します.
    ステージの当たり判定ですね.

実行

矢印で移動できるはずです.
(何か忘れてるかもしれない...)
f:id:lambda410:20211229161746g:plain


まとめ

途中でクソ雑にまとめてしまいました...
ごめんなさい.

映画の感想(2021/12版)

こんにちは

近所にGEOがあることを知ったので映画を借りまくっています.

今回は2021年の12月に見た映像作品の感想についてです.
全体的に雑感想です.


チャイルド・プレイ

子供の時に見てトラウマになりました!!!!

有名ドールホラーの1作目で,オカルトホラーみが強くて好き.

チャイルド・プレイ2

パッケージがすごくイイ!!!!

チャイルド・プレイ2(字幕版)

チャイルド・プレイ2(字幕版)

  • アレックス・ビンセント
Amazon

チャイルド・プレイ3

成長したアンディーがチャッキーと闘うお話です.

若干マンネリ化の兆しが見えるかな...?

チャイルド・プレイ チャッキーの花嫁

コミカルホラーに方向転換した感じです.

怖いというよりくだらない雰囲気が良い!

チャイルド.プレイ チャッキーの種

前作より強力に笑いに走った方向性です.

家族で見るとかなり気まずくなる気がします.

チャイルド・プレイ 誕生の秘密

前作・前々作と変わって原点回帰のホラーです.

ホラー感が一番強く,個人的にチャイルド・プレイの中では一番好きです.
ラストが必見!!!

チャイルド・プレイ チャッキーの狂気病棟

前作の続きです.

次回作ありきの終わり方で,続きが気になります.
2021年時点ではまだ作られていないっぽいです.

ただ,2021年の10月からは海外でドラマが始まっているのでそろそかな?

チャイルド・プレイ(2019)

過去作とは一切関係ないリブート版です.

人工知能になったチャッキーに注目!
(チャイルド・プレイとして見ると...)


ハッピー・デス・デイ

パッケージからホラーかな?って映画です.

死ぬことで同じ日をループしてしまう主人公が殺されないように頑張るお話.
推理小説ぽくて好き.

ハッピー・デス・デイ 2U

前作の続編で,死に戻りを脱出した直後のお話です.

前作から続けてみるのがおススメ!
今回はホラーよりSF色が強めですが,期待を裏切らない面白さでした.


ハロウィン(1978)

ブギーマンの記念すべき1作目.

ホラー映画の教科書的な立ち位置ですね.

ハロウィン II

前作の続きかと思ったら監督が違うリブート版でした(間違って借りた).
前作の隣にあったので勘違いした.

ブギーマンが人間ぽっかったです.

ハロウィン

1作目の続編です.

おばあちゃんになったローリーが刑務所から脱獄したマイケルと闘うお話.
2021年にこの映画の続編が公開され,3部作の予定らしいです(次がラストかな).

めちゃ面白い.


スクリーム

有名ホラー映画のネタが沢山出てくるホラー映画です.
ホラー映画のお約束を壊してくるゴーストフェイス君が必見.

ハロウィンや13日の金曜日エクソシストなどの有名ホラーを見ておくとより楽しめます.
推理小説みが強くて好き.

スクリーム [Blu-ray]

スクリーム [Blu-ray]

  • デイヴィッド・アークェット
Amazon

スクリーム2

前作の事件を映画化したら模倣犯が現れるお話です.

やっぱりホラー映画のテンプレをネタにしています.

スクリーム2 (字幕版)

スクリーム2 (字幕版)

  • デイヴィッド・アークェット
Amazon

スクリーム3

前作の映画化第二弾を作成していたら模倣犯が現れるお話です(2回目).

お化けの仮面はいつでも大人気.

スクリーム3 (字幕版)

スクリーム3 (字幕版)

  • デヴィッド・アークエット
Amazon


エルム街の悪夢(2010)

初代のリメイク版です.

フレディが暴れる話.
Dead by Daylightのフレディは,初代ではなくこの映画が出典らしいですね.


ゴーストバスターズ(1984)

ファミコンでやったな~って思って借りました.

ファミコンのタイトル画面がクソ怖かった記憶がありますが,映画はギャグよりです.
名作!

ゴーストバスターズ

旧作のリメイク版です.

コミカル度が増してて爆笑しました.


13日の金曜日

有名ホラー映画の1作目ですね.

彼の登場はまだですよ.

13日の金曜日 PART2

ズタ袋の彼が登場します.

まだ人間ぽい.


SAW

密室に閉じ込められた2人の男は脱出できるのか?ってお話.

生きることを蔑ろにすると殺人鬼に目を付けられるよ.


まとめ

12月なのでホラー映画ばかり見てました(????).
多分これからもホラー映画をメインに見てると思います.

UE4: 簡単な懐中電灯の機能を作る

こんにちは

今回はUE4で簡単な懐中電灯を作成した時の備忘録です.


参考文献

この記事の元ネタです.
ここでは簡単に下記の内容をまとめます.
www.youtube.com


開発環境

Unreal Engine4 4.27.1
Windows10 Home


コンポーネント設定

FirstPersonテンプレートについてくるFirstPersonCharacterのBluePrintを下記のように設定します.
いらないものを削除するとBulePrintがエラーを吐くので,その箇所も削除します.

ライトはSpotLightです.
f:id:lambda410:20211209084336p:plain

ライト設定

ライトを下記のように設定します.

Intensity: 光の強度
Light Color: 光の色
Attenuation Radius: 光の範囲
Inner Cone Angle: 最大輝度を放つ範囲?
Outer Cone Angle: フォールオフが発生する範囲?

InnerとOuterは下記URLを参考にしてください. docs.unrealengine.com

f:id:lambda410:20211209084721p:plain

ライトのソケット設定

親子関係にするだけでも良いですが,モデルの動きにライトも合わせたいですよね.
そんなときはソケットの親ソケットとしてhand_lを指定します.

ソケットは「稼働用のボーンに物体をアタッチするための機能」で,この例では左手に持たせる設定となります.
設定してあげると腕の動きに追従してライトも揺らいでいるはずです.

ライトファンクション

ライトにマテリアルを適用して,ライトの範囲をマスクする機能です.
通常だと光が当たっているだけですが,ライト用のマテリアルを適用することでそれっぽくなります.
(左: 適用, 右: なし)
f:id:lambda410:20211209090616p:plain

テクスチャは何でもよいですが,ここでは動画のものを使用しました.
0. 画像をインポート
1. 画像エディタを開き,圧縮設定をグレースケールに変更(画像1)
2. 画像からマテリアルを作成
3. マテリアルエディタを開く
4. 「マテリアル」の「Material Domain」を「Light Function」に変更
5. エミッシブカラー(発光色のこと?)にRGBを接続(画像2)
6. FirstPersonCharacterのLight Functionに作成したマテリアルを適用

f:id:lambda410:20211209091448p:plain f:id:lambda410:20211209091416p:plain


BluePrint

右クリックでライトをカチカチさせます.
f:id:lambda410:20211209090234p:plain


実行

ここまで設定すると右クリックでライトカチカチできると思います.
(屈伸機能を入れると某ゲームのライト煽りが再現できそう)

箱がぶっ飛んでいる理由はわかりません.
機嫌が悪かったのでしょうか?
f:id:lambda410:20211209092354g:plain


まとめ

次はモデルに懐中電灯の機能を追加したものを作成したいです.