たぬきすのアプリ開発日記

アプリ開発の備忘録兼日記

【Unity】【開発日記】ドット絵アニメーションを作ってみた話

どうも!たぬきすです。

 

現在Unityで横スクロールシューティングゲームを作っている最中です。ゲーム内容はこんな感じ

 


2DShooting

 

今のところは試作段階ですが、これからどんどん改良してきます。

ただ、作っていて思ったのですがなんか無機質な感じがするんですよね。頭と胴しかない人形を動かしているだけなので当然なのですが。

しかし、私の絵のレベルは素人のお絵かきレベルだし、キャラクターを作って動かすのもハードルが高そうだしなんかいい方法ないかなーとか思っているうちにいい案がひらめきました。

 

ドット絵で描けばいい

 

ドット絵ならドットが大きいので描き込む量も少ないし、スケッチに比べて絵の上手い下手も差が出づらいと思うんですよね。ゲーム制作でも鉄板ですし。

ということでドット絵アニメーションを作ってみました!

作成開始

まずはツール探しから。パソコンでは無料で使える便利なドット絵ツールはたくさんあるんですけど、出先でもお絵かきがしたいのでipadで使えるドット絵アプリを探しました。ただし、

  • ipad対応
  • ドット絵が描ける
  • お絵かきアプリの定番機能がある(レイヤー、定規など)
  • アニメーション制作にも対応
  • (できれば)無料で使える

と、これらの要素を全て兼ね備えるアプリを見つける必要があり、探すのに苦労しましたが、これら全てを満たす神アプリを見つけてきました。それがこちら

Pixel Studio for pixel art

Pixel Studio for pixel art

  • Farida Yarullina
  • Photo & Video
  • Free

apps.apple.com

あくまでドット絵入門者が便利だと思ったアプリなので詳しいレビューはしませんが、無料で使えるので上の要素があるアプリを使いたい人は確認してみてはどうでしょうか。

ツールも見つかったので、ここからアニメーションを作っていきます。

 

今回作るのはプレイヤーのモーションで、作るモーションはとりあえず

の2つにします。立ち絵は別段難しくなさそうだけど、問題はダッシュですよね。アニメーションのいろはを全く知らない私はどうやったら人が走っている風に見えるのかを学ぶ必要がありそうです。何か参考になりそうな記事を探してきます。

east99.nobody.jp

ありました。走りっぽく見せる秘訣は小さなジャンプを意識することみたいですね。頭の浮き沈みと足の動きに留意しながら描くのが良さそうです。まずはイメージスケッチから

f:id:tanukis:20200204122313p:plain

イメージスケッチも描いてだいたいイメージが固まってきたので、このスケッチをベースにドット絵に落とし込んでいきましょう。

まず立ち絵から

f:id:tanukis:20200204124224p:plain

いい感じに描けた気がします。ただ静止画だと生き生きしないのでもう一枚描いてアニメーションにします。

f:id:tanukis:20200204124736g:plain

いいですね!動きが加わるだけでキャラクターがだいぶ生き生きとしますね。ただ屈伸させているだけなのにあるとないとでは大違いです。この調子でダッシュも作っていきます。

f:id:tanukis:20200204125610g:plain

できました!結構まともに表現できてません?走るアニメーションの留意点をそのまま反映させて、6枚の絵をループさせています。アニメーションを自作は初めてでしたが、ドット絵で作るとこんなに簡単に作れてしまうのは正直驚きました。

 

以上、ドット絵アニメーションを作ってみたでした!ドット絵を使うと思っている以上に簡単にアニメーションが作れるので、興味のある方はぜひチャレンジしてみてはどうでしょうか?
今度はゲームにアニメーションを組み込む必要がありますがそれは次回に書こうと思います。

 

最後に、GooglePlayで自作アプリを公開しているので、興味がある方時間がある方はぜひ遊んでみてください(スマホ推奨)。

play.google.com

 

ではまた!

 




 

 

 

【Unity】爆発エフェクトをDefault-Particleのみで作ってみた

どうも!たぬきすです。

 

今現在横スクロールシューティングゲームを作っている最中で、ロケランとかグレポンの爆発エフェクトが欲しいなと思っていた今日この頃です。

 

ということでUnity公式が提供している爆発エフェクトをインポートして使ってみたものの「リアル指向すぎてゲームデザインに合わない」「重たくて再生時に固まる」という問題があり、結局自分で作ることを決心しました。

 

下のリンクが参考にさせていただいた記事です。

 

styly.cc

ktk-kumamoto.hatenablog.com

 

あと、Unity公式が提供しているエフェクト集も参考にしました。

 

assetstore.unity.com

 

これらを参考にしてみて分かったのは、爆発エフェクトは大体

  • フラッシュ
  • 煙(なくてもOK)
  • 破片(なくてもOK)

でそれっぽく見えるようにできるということです。ただフォトショップは全く使ったことがないので、Unityで始めから用意されているDefault-Particleのみを使って爆発を表現したいと思います。

ちなみに私が使用しているUnityのバージョンは2018.4.14f1です。

ということで作成開始!

 

実際に作ってみた

爆発エフェクトは様々なパーツで構成されるため複数のパーティクル を一斉に再生することで表現します。

 

f:id:tanukis:20200131173854p:plain

爆発エフェクトのオブジェクト

ゲームオブジェクトの親子それぞれにパーティクルシステムを持たせて再生すれば一斉にパーティクルが再生されます。

 

まずはフラッシュから

 

 


flash

 

フラッシュの作り方はシンプルで、Rendererでmaterialを設定し(この記事では全てDefault-Particleを使用)、StartSizeでお好みの大きさに設定して、emissonでパーティクルを一個生成、SizeO verLifetimeで発生後すぐに縮小し消滅するようにしてあげます。

 

f:id:tanukis:20200201071221p:plainf:id:tanukis:20200201071305p:plainf:id:tanukis:20200201071247p:plain

 

お次は炎

 


ember

 

炎については好みも分かれると思うので全てを説明しませんが、個人的に肝だと思う部分はColorOverLifetimeを白→オレンジ→黒の順に変化させることと、MinParticleSizeの値(確か初期値は0)を大きくすることです。

この二つをするだけで、爆発エフェクト感がとても増しました。

 

f:id:tanukis:20200201074038p:plainf:id:tanukis:20200201074100p:plain

f:id:tanukis:20200201074832p:plain

 

フラッシュと炎を組み合わせるとこんな感じ

 


explosion

 

初めて作ったにしてはそれなりのものが作れたと思うのでとりあえず満足です。

ただ、もうちょっとだけゴージャスにしたいなーと思ってこのエフェクトにパーティクル を盛った結果、

 


bigExplosion

 

こんな感じになりました。もちろんDefault-Particleしか使っていません。

初めはパーティクル の自作に対して敷居が高そうと敬遠していましたが、使い始めると慣れていくものでパーティクル作りは結構楽しいです。

 

以上、UnityでDefault-Particleのみで爆発エフェクトを表現してみました。楽しんでいただけたなら幸いです。Androidアプリも作っているので時間があれば遊んでみてください!(スマホ推奨)

 

play.google.com

 

ではまた!

 





 

たぬきすブログ開設!

はじめまして!たぬきすです!

 

去年の冬からUnity、AndroidStudioを使ったアプリ開発を始めた22歳です。

 

システム開発業務を行う会社に内定をいただき、就職に備えてプログラミングを独学しようと考えて始めたアプリ開発でしたが、思った以上に面白く、今では趣味の一つになってしまいました(笑)。

 

そんなことで、現在アプリを2本作り、GooglePlayにアップしたのですが、それまでに多くの問題に取り組んできました。

 

それが結構多かったので備忘録的なものでも作ろうかなと思いこのブログを立ち上げました。

 

このブログではアプリ開発の過程やつまづいたことを日記的に書いていこうかと思っています。更新は月に一回くらいを目標に書きたいです。

 

ブログを書いた経験はほとんどなく、つたない内容になるかも知れませんが、誰かの役に立つブログを目指したいと思います。

 

よろしくお願いします!