ラベル 演出 の投稿を表示しています。 すべての投稿を表示
ラベル 演出 の投稿を表示しています。 すべての投稿を表示

2021年6月28日月曜日

Unityでゲームを作っての反省

 

 

Unityでスマホ用ゲームを作成しました

 このところUnityで作成したいた、Androidスマホ用新作ゲームをリリースすることができました。

 「封竜陣」 Google Play ストアからダウンロードをよろしくお願いします。 

 『西遊記』『封神演義』『狐狸縁全伝』などでおなじみの天将たちと一緒にパズルを解いて竜を封印していくというパズルゲームです。

 じゃんけんで友好度を上げたり、宝珠で友好度や実績をアップさせたり、軍師を招聘したり、スキルを使ってパズルを力業で解いたり、謎を解いたり、天灯をあげて天に祈ってアイテムを手に入れたりと、あれこれとにかく、楽しそうなことを詰め込みました。

 思いっきり楽しんで作ったので、楽しんでいただければ幸いです。
 

DOTween

 
  ゲーム内のアニメーションには、何度かDOTweenを使いました。
 DOTweenというのは、Unityで使える、アニメーションツールアセットです。
 若干癖があって、DOTweenそのものを最後に破壊しないと作動し続けてしまうだとか、ターゲットにするオブジェクトがないのにアクセスしようとすると注意が出るなど、素人にはなぜ黄色アラームが出てしまうのかよくわからなくて怖い部分もあるのですが(しばしばエラーになって、導入し直しました)、簡単に動きをつけられて便利でした。
 

ゲーム作成とアニメ作成は似ている

 
 ゲーム作成については素人だったため、完成までの工程の途中で挫折しないか不安でしたが、「(いついつまでに)絶対にしあげる」とまわりの人に言うことで、モチベーションを保ちました。
 
 振り返ってみると、工程でつまずかないためには計画性が重要である点は、アニメ作成と同じでした。
 どんなものを作るか考えて、大まかな流れ(小説ならあらすじ、アニメで言ったらストーリーボードみたいなもの)を考える。
 
 今回は、「パズルを解いて竜を封印する」という単純な話に、天将との友好とか、天灯あげ(ガチャ要素)とか、軍師による自動解答、天将の技による力業でのパズル解きといった要素を加えて全体像を考えました。

 それから、個々の部分になるのですが、先に全体を形作っておくことで、先に設定しておく必要がある数値(経験値とか、友好値とか、パズルの面数とか)やその名前などがしっかりできていたので、途中でぶれずにすみました。
 
 個々に入ると、それぞれに絵があり、音楽があり、スクリプトがありで、部分でありつつ、やはり全体的な統一も必要で、 これもアニメ作成と同じでした。アニメもゲームもまず、基本設定をしっかりと、ということですね。

 Unityでゲームを作っての反省

 
 今回の反省は、絵は、もっと上手な方にお願いした方がよかったかな(しかし、人に頼めばその分赤字になってしまいます)という点です。
 あと、Udemyでいくつかの講座を受講して勉強はしましたが、 やはり素人なので、無理が出てしまった部分もあるし、スクリプトについても、調べながら手探りで進めたので、とても時間がかかりました。
 ネット上のたくさんの情報に助けられました。
 どうもありがとうございます。
 
 とりあえず、今の時点での渾身
 
  
 「封竜陣」 
 よかったら、Google Play ストアからダウンロードをよろしくお願いします。 
 パズルゲーム好きさんはもちろん、パズルゲームが解けなくてイライラする人も、天将のスキルや軍師による自動解答で、進めていけるゲームです。
 セーブ機能をつけ、毎日少しずつ天将との友好をあげて、パズルを解いて実績をつけて、と、スキマ時間に進めていくのが好きな方に特にお勧めです。

追記

 2025年 更新しないでおいたら、しだいにOSが古くなったために遊べなくなり、ゲーム作成からは撤退しました。もうダウンロードはできません。
 作り続け、更新し続けることができないと、数年で撤退することになることがわかりました。
 最大の反省です。
 とはいえ、作ることそのものがとても楽しかったので、楽しかった思い出として心に残っています。 
 

2020年8月16日日曜日

クリップスタジオでアニメを作ろう・マスクでワイプ

 

 クリップスタジオペイント(CLIP STUDIO PAINT、クリスタ)は、動画編集のアクセントとしても、いろいろと使えます。
 以前は、2Dカメラを使ってトランジションの一種のワイプを作ってみましたが、今回は、画像に直接マスクを使用してワイプしてみます。

■準備


 二枚の画像AとBを用意します。

 新規アニメーションファイルを作成し、二枚の画像を読み込み、Bを上になるようにしておきます。

■マスクの作成

●マスクに使う画像の準備

 新規レイヤーを作成し、マスクに使う形を作ります。
 今回は、ギザギザした線を引いておきます。色や道具は何でもかまいません。
 今回は、線ににじんだ感じをつけるために、クレヨンを使ってみました。

◎注意

 マスクが、書き出される部分を完全に覆う必要があるので、必ず、余白の部分に描画して下さい。余白が小さくて描きにくい場合は、キャンバス基本設定で広さを変更します。

 ●選択範囲からマスクを作成する

 「自動選択」ツールを使って、キャンバス中央が入る部分を選択します。

 画像Bを選択し、「選択範囲をマスク」を適用します。
 マスク作成に使ったレイヤーは非表示にするか消してしまいます。

 

   →マスクされた部分が見えなくなり、下にあった画像Aが見えます。

■マスクにキーフレームを設定する

●設定

 レイヤーパレットでマスクを適用したレイヤーを選択し、「レイヤーマスク」→「マスクをレイヤーにリンク」のチェックをはずします。

 タイムラインの最初のフレームに移動、「レイヤーのキーフレームを有効化」します。

 今回は、一定の速度で動かしたいので、キーフレーム補間は、「作成するキーフレーム:等速」にしておきます。

 タイムパレットでマスクを選択し、「レイヤー移動」ツールを使用し、キャンバスを一度クリックすると、最初のフレームにキーフレームが設定され、キーフレームを示す◆が表示されます。

●開始位置にキーフレームを設定する

  タイムラインで、ワイプを開始したい位置のフレームまで移動します。
 もう一度、「レイヤー移動」ツールを使用し、キャンバスを一度クリックすると、フレームにキーフレームが設定され、キーフレームを示す◆が表示されます。

 タイムラインで、移動を終了するフレームに移動します。

●終了位置にキーフレームを設定する

 タイムラインで、マスクを選択した状態で、「レイヤー移動」ツールでマスクを移動させ、画像B全体が表示される位置まで動かします。
 動かし終わると、フレームにキーフレームが設定され、キーフレームを示す◆が表示されます。

■完成


 こんなアニメができあがりました。



 

 

 

2020年8月15日土曜日

クリップスタジオでアニメを作ろう・虫眼鏡のようなサーチ

 
 

  クリップスタジオペイント(CLIP STUDIO PAINT、クリスタ)は、動画編集のアクセントとしても、いろいろと使えます。
 今回は、のぞき穴・虫眼鏡・サーチライトのようなサーチを作ってみます。

■準備


 画像A(探される側)と、黒い画像Bを用意します。

■マスクの作成


 「選択範囲ツール」で「楕円形選択」にし、丸い選択範囲を作ります。
 虫眼鏡の穴やサーチライトの光に相当する部分になります。

 レイヤーパレットで画像Bを選択し、右クリックし、「レイヤーマスク」→「選択範囲をマスク」して、マスクを適用します。

 →穴ができました。

 

 

 ■キーフレームを適用する


 レイヤーパレットでマスクを適用したレイヤーを選択し、「レイヤーマスク」→「マスクをレイヤーにリンク」のチェックをはずします。
 タイムラインの最初のフレームに移動、「レイヤーのキーフレームを有効化」します。

 
 タイムラインで、(レイヤー名)B:変形となっている左の「+」をクリックして展開します。
 さらに、タイムラインで、マスクの左の>をクリックすると、さらに下に設定できるパラメータがあります。

 

  タイムラインで「マスク位置」、ツールバーで「レイヤー移動」ツールを選択します。
 動かしたいフレームに移動し、動かしてキーフレームを作成していきます。

同じように、「マスク拡大率」「マスク回転」「マスク回転中心」は「操作」ー「オブジェクト」でオブジェクト操作ツールを選択して変更を加えて、キーフレームを作成していきます。


■完成



 

 

 

 

2020年8月14日金曜日

クリップスタジオでアニメを作ろう・動画の変形三分割トランジション

 

 

 クリップスタジオペイント(CLIP STUDIO PAINT、クリスタ)は、動画編集にもいろいろと使えます。
 今回は、変形三分割トランジションを作ってみます。

■準備

  画像AとBを用意します。今回は、こんな感じのものにしました。

 

■画像AからBへのトランジション作成

●上方へのトランジション作成


 画像Aが表示されてから上方に移動して消え、画像Bが下から上昇してきて目標の位置で止まるアニメーションを作ります。

 画像Aを選択した状態でタイムラインの最初のフレームに移動し、「レイヤーのキーフレームを有効化」ボタンをクリックします。(画像Bは非表示にしておきます)

 タイムラインのAのところに「変形」と表示され、画像Aが編集できないように、編集ロックされます。

 レイヤー移動ツールを選択します。
 画像Aの最初の位置で、一度キャンバスをクリックすると、タイムラインにキーフレームを示す◆が表示されます。

 タイムラインで、画像Aの移動を開始する位置まで移動し、もう一度キャンバスをクリックしてキーフレームを作成します。
 さらに、タイムラインで、画像Aの移動を終了する位置まで移動します。
 レイヤー移動ツールで、画像Aを移動終了位置まで動かすと、そこにもキーフレームが表示されます。
(今回の移動終了位置は上方、基準フレームの外まで動かします)

 →画像Aが下から上へと移動するようになりました。


 画像Bを表示し、選択します。
 タイムラインで「レイヤーのキーフレームを有効化」し、タイムラインの移動を開始する位置、移動終了位置に移動し、、画像Bをレイヤー移動ツールで移動してキーフレームを追加します。

 →画像Aが下から上へと移動し、画像Bも下から中央へと移動するようになりました。


●左右へのトランジション作成


 画像AおよびBをコピーします。
 タイムラインにあるキーフレームも一緒にコピーされますので、レイヤー移動ツールで移動開始位置、終了位置を直して、画像Aが左へと移動して消え、右から画像Bが現れて中央で止まるようにします。

→できあがりました。

 同様に、画像AおよびBをコピーして、タイムラインのキーフレームにおけるキャンバスでの位置を直し、画像Aが右へと移動して消え、左から画像Bが現れて中央で止まるようにします。

→できあがりました。


●ムービーとして書き出し


 このままだと編集ロックされていて、マスクが適用できませんので、作成した、上へ、右へ、左への三つのアニメーションを、いったん、ムービーとして書き出します。
 画像AおよびBだけ表示して。他は非表示にします。

「ファイル」→「アニメーション書き出し」→「ムービー」で書き出します。

 同様に、画像AのコピーおよびBのコピー、画像Aのコピー2およびBのコピー2だけをそれぞれ表示して書き出すことで、三つのムービーができあがります。


■三分割トランジション


●三つのムービーの読み込み


 新規ファイルを作成します。

「ファイル」→「読み込み」→「ムービー」で、先ほど作成した三つのムービーを読み込みます。

 他のレイヤーは消しておきます。

●マスクの作成


 次の場面に切りかえるのに使いたい形を考えて、新しいレイヤーに描きます。
 今回はY字形の三分割線を描きます。
 選択範囲を決めるためのものですので、色は適当で大丈夫です。線は細くしておきます。

 新規レイヤーを作成し、Yの形になるように、「図形ツール」で線を引きます。

「自動選択ツール」で、三分割された一区画を選択します。
 選択範囲を反転します。

 レイヤーパネルで上に移動するムービーを選択し、右クリックして「レイヤーマスク」→「選択範囲をマスク」します。

 

 →下側がマスクされ、三分割された上側だけが見えるようになりました。

 同様に、三分割された他の二つの部分についてもマスクを作成し、それぞれのムービーにマスクを適用して、右に移動する部分は右側だけ、左に移動する部分は左側だけが表示されるようにします。
 隙間ができるようであれば選択範囲を拡大縮小して調整し、Yの字形を描いたレイヤーは非表示にします。

 ムービーとして書き出します。

■完成


 こんなアニメができあがりました。


◎追記

■別の方法


 一度、ムービーに読み出さなくてもマスクを適用できる方法もありました。

 画像AからBへのトランジションを作成したあと、ムービーに書き出しをせず、Y字形の三分割線を描いてマスクを作成します。

●マスク範囲の作成


 Yの形になるように、「図形ツール」で線を引き、「自動選択ツール」で、三分割された一区画を選択します。

●キーフレームの無効化


 マスクを適用したいレイヤーを選択し、再度「キーフレームを有効化」ボタンを押して、一度、キーフレームを無効化します。

 キーフレームについていた◆が消えます。
 レイヤーの編集ロックが解除され、編集可能になります。

●マスクの適用


 レイヤーを右クリックし、「レイヤーマスク」→「選択範囲外をマスク」でレイヤーにマスクを適用します。

●キーフレームの再有効化


 マスクを適用したレイヤーを選択し、再度「キーフレームを有効化」ボタンを押して、もう一度、キーフレームを有効化します。

 同様に、他のレイヤーにもマスクを適用すれば、同じアニメが完成します。


2020年1月29日水曜日

クリップスタジオペイントでアニメを作ろう・手前にアニメのついたワイプでの場面切り替え




 ワイプで場面を切り替えることができたら、さらに、もうひとつ2Dカメラを追加し、それを一番上に持ってきます。

 一番上にしたカメラに、アニメーションフォルダを入れ、アニメーションを入れれば、手前にアニメのついたワイプで場面切り替えをすることもできます。






2019年12月30日月曜日

クリップスタジオペイントでアニメを作ろう・ワイプで場面を切り替える

●ワイプとは



 ある場面を、ふきとるようにして次の場面に切り替える方法が、アニメでよく使われていますよね。この切り替え方は「ワイプ」と呼ばれています。

 編集ソフトについていることの多い機能ですが、今回は、このワイプを、クリップスタジオペイント(CLIP STUDIO PAINT、クリスタ)を使って表現してみます。

●クリップスタジオペイントでワイプを作る


■準備

ファイルを新規作成します。
 わかりやすくするため、作画サイズの幅を二倍にしておきます。
 アニメーションフォルダにキャラクターの動画とその背景画を2場面分、用意します。

 一方の動画とその背景画を、フォルダに入れておきます。





■ワイプに使う画像を用意する

  次の場面に切りかえるのに使いたい形を考えて、新しいレイヤーに描きます。
 今回は、わかりやすいように、波線にしてみました。

 新規レイヤーを作成し、上から下まで届くように波線を引きます。


■マスクにする画像を作成する

ワイプに使う画像を、マスクに使えるようにします。
 前回作成したレイヤーの、波線の右側を黒く塗りつぶします。

■2Dカメラフォルダーを作成する

上部メニューの[アニメーション]-[アニメーション用新規レイヤー]-[2Dカメラフォルダー]を選択して、カメラフォルダー(カメラ1)を作成します。


■2Dカメラフォルダーに入れる


 2Dカメラフォルダー:カメラ1の中に、マスクにする画像を入れます。

■並べ替える


 一方の動画とその背景が入っているフォルダー
 カメラ1(マスクにする画像が入っている)
 もう一方の動画
 もう一方の背景

 という順番になるように、フォルダーやレイヤーを並べ替えます。


■ワイプに使う画像のレイヤーを下のレイヤーにクリッピングする

レイヤー1を右クリックして、[レイヤー設定]-[下のレイヤーでクリッピング]を選択し、動画とその背景の入っているフォルダにクリッピングします。




 クリッピングされると、レイヤーの左のほうに、赤い線がつきます。



■2Dカメラのキーフレームを設定する


 2Dカメラフォルダー:カメラ1を選択し、左のツールバーから、[操作]を選択すると、2Dカメラフォルダー操作用の青い枠線が出ます。



 [タイムライン]パレットで、ワイプをはじめたいフレームに移動します。



[タイムライン]パレットのメニューの、[キーフレーム補間]-[作成するキーフレーム:滑らか]を選択します。([作成するキーフレーム:等速]でもかまいません)



 2Dカメラフォルダー操作の青い枠線を右に移動し、始点のキーフレームを設定します。



[タイムライン]パレットで、ワイプを終了したいフレームに移動します。



 2Dカメラフォルダー操作の青い枠線を左に移動し、終点のキーフレームを設定します。




■完成


 こんなアニメができあがりました。