2021年6月28日月曜日

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

 

 

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

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

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

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

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

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

DOTween

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

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

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

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

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

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


2021年5月19日水曜日

クリップスタジオ小技・動画画面の大きさ変更

 

 動画画面の大きさ変更

 CLIP STUDIOのアニメーション機能を使っても、写真のトリミングのように、動画画面の一部を取り出して、その大きさの動画にすることができます。

 ・新規アニメーション を作成し、動画を読み込む

 


 [ファイル]ー[新規]で、新規アニメーションを作成します。
 そのまま、特に何も描かずに、[ファイル] ー[読み込み]ー[ムービー]で、目的の動画を読み込みます。


・好きな大きさを指定

 


[選択範囲]ー[長方形選択]で、作りたい動画の大きさを指定します。

 

・キャンバスサイズを合わせる

[編集]ー[キャンバスサイズを選択範囲に合わせる]で、キャンバスサイズを、選択範囲に合わせます。

 フレームは削除されますなどの注意が出ますが、「OK」で。

  ・動画の書き出し

 キャンバスが目的の動画の大きさになったら、[ファイル]ー[アニメーション書き出し]ー[ムービー]などで、動画を書き出します。

・完成


 長いと重くなるので、短い動画で、画質をそれほど問わないのであれば、とても簡単で、便利に使えます。 

 今回は、Unityで作成したスマホ用ゲームの画面を録画したものを、 スマホサイズの画面にするのに使用してみました。

 やや画像が粗くなるので、なるべく目的の部分が大きくなるように動画を撮ってから使ったほうがよさそうです。

 


 

 






2021年4月2日金曜日

Unityでゲームのアニメーションを作ってみました

 


Unityでアニメーション

 Unityで、ゲームアプリのアニメーションを作ってみました。

 Unityは、3Dがかなり強力なようですが、今回は2Dで、作り方は、ほぼGIFアニメにスケールなどのパラメーターが加えられてかつ、パラメーターについての補間があるような感じのキーアニメーションです。

 さらに、遷移についてのアニメーションコントローラーもあって、なるほど、ゲーム仕様だと思いました。

 ぴょこぴょことしたモグラの動きが楽しいゲームになりました。

無料ゲームで確認

 よかったら、Google Play から、ダウンロードして遊んでみて下さい。無料です。

 もぐらたたき系ですが、見た目と違って、かなりしっかりたたかないとクリアできない難易度になっています。

もぐのはら 


 ゲーム中動画




 


 

 

 

 

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

●キーフレームの無効化


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

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

●マスクの適用


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

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


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

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