【開発】「本業」の進行状況

例のゲームですが、なんとか進行できてます。








チュートリアルを作り、ステージを作り、天気の要素を作り、ギミックを作りetc






↑ 繰り返し遊んでもらいたいので、本ゲーム後に
「卓上ロード(※設定がまだあいまい)」というすごろくのようなマップを進みます。
進める量は、勝敗や身に着けているアバターで決まります。


3月までといったけど、
ゲーム内容に
3月いっぱいは使いたいと思います。

4月ごろ申請して通ったらまた報告します。

【連載】Live2dで版権キャラを動かす【その2.5】

※先には進みません


「PSDを加工するツールって何使ってるの」というコメントを頂いたので、
軽くではありますが紹介します。

PSD形式は「Photoshop」で作成できます。






↑ 保存形式を選ぶ所で「Photoshop(.PSD)」を選択。











↑  PSDが保存されます。


無料のツールですと
・GIMP
でも可能です。


私が使っていたのは
・CLIP STUDIO PAINT
こちらは基本有料ですが、30日間無料で体験できます。
PRO版は5000円ほどで購入できます。

-----------余談----------------

ラフスケッチに使用していた以下のツールは
・メディバンペイント






無料で使えるお絵かきツールの一つで、
最低限の機能で起動も早いので、ちょっとした絵を描くときは
こちらをつかっています。



※こちらはPSD形式では保存できません。

【連載】Live2dで版権キャラを動かす【その2】

前回の続きです。

今回やることはこの二つです。

(1)顔の部分のパーツを分ける

(2)切れ目を丁寧にする

(1)について
前回は頭だけをおおざっぱに分けました。
よりリアルに&表情もつけたいよって場合は
ここから、髪の毛や目、鼻、口など、パーツ単位で切り取っていきます。

(2)について
この前のは本当に"分けただけ"なので、
すこしでも動かしたり回転させようなものなら、
見えてはいけないところが"見えて"しまいます。







↑例えば、こちらは今着手している「ひめみ」というキャラクター。
右腕を動かすと、ただ切り取ってるだけというのがバレてしまう。
これでは作品にならない。

それでは順番にやっていきましょう。 

---------(頭部分のパーツを分ける)----------

髪などは「動かしたい部分」を意識して切り分けたらいいと思います。
エクレールの場合、はねた髪は、首を傾けた時などに揺らしたいので分けています。





分け方は前回切り取った時と同じように。
多角形選択などで。
　ただし、だいぶ細かくなるのでいる部分も切り取ってしまわないように注意




↑ 前髪関係のレイヤー一例。
髪関連はここまで分けました。
揺らさないのであれば分けなくてもいいです。

顔の部分は、
目、鼻、口を分けています。
こちらも動かさないのであれば分ける必要はないですが、
角度を傾けた時、不自然になることがあるので、心配であれば分けたほうが無難かと思います。







↑若干わかりずらいかもだけど、上が首を角度0,下が30度傾けたとき。

パーツを分けてないと、この段階で、
ひしゃげて不自然になる可能性がある。


[ 顔パーツを分ける例 ]
目玉を動かす場合、目玉と白目を分ける。
瞬きをさせたい場合、まつ毛を分ける。

今回、二つともやりたかったのでレイヤーはこうなっています。
↓






まゆもそれぞれ左右。
口は開いたり閉じたりするため、閉じた状態の口を追加しています。
↓





電気みたいなやつも分けました。
原画に背景や部品がある場合、動かすパーツにしてもいいですし、
「キャラだけでいいや」て場合は消してしまってもいいと思います。
↓

---------(修正する)----------

これですべての部品が分け終わりました。

ではいよいよ
動かしたとき、違和感が出ないように加工していきます。
人によってはおそらくここが一番時間かかるかもしれません。

持っている方はペンタブを用意しましょう。




↑こちら、前髪をすべてなくしたエクレールです。
切り取っただけではそこがいかにも切り取りましたみたいに空いてると思うので、
うまいこと修正します。




↑　修正済み。まゆと目の部分がない状態です。

-------(修正例)---------------

↑手のひらがあった部分。
手のひらを動かしたとき切れ目が見えないようにした

↑原画はマフラーの後ろに髪の毛がきていた。
不自然にならないように後ろ髪に修正をくわえる


加工を入れると、
描画順がおかしくなる場合があるので、
適度にパーツを並べ直してください。

ためしに回転ツール等でパーツをいじってみて、
違和感が無くなったかなってなったら、
次回はいよいよこのPSDをモデラーに持っていきます。


おつかれさまでした。

【連載】Live2dで版権キャラを動かす【その1】

ゲームしながら
あー。このキャラ動いたらいいのに。
て思ったことはないですか?

私はあります。
静止画で既に魅力のあるキャラが動いてるだけで
「あ、ガチャ引こう」ってなります。

……というわけで
Live2dでキャラクターモーションをつくろう!!

何回かに分けて
ゲームなどの立ち絵に使われそうなモーションを作成していきます。

・Live2dの基本操作や作業内容がわかる方
・作品の作成経験はまだあまりない
を対象に書いていきます。
　私もこれから勉強する身なので、初心者の方の参考になれば幸いです。
記事の中で至らないところもあると思いますが、温かい目で見守ってやってくださいませ。
ご指摘もどぞー(+_+)/

今回作成したキャラクターはこちら。




チュウニズムという音ゲーのキャラです。
個人的にいろいろ好めるキャラなので作りました(*'▽')





---------(進め方)----------

Live2dの作業工程は大きく分けて三つあります。

(1)PSDの作成
…イラストのパーツを分けたり、隙間などを補完する
(2)モデリング
…パーツを動かせるようにポリゴンを入れていく
(3)アニメーション
…モデリングした一枚絵にモーションをつける

ここで、私が実際にさわってみて思ったことは、

初心者は、イラストから描くな、PSDから作るな。

PSDの作成がもっとも手間がかかり、なおかつLive2Dの重要な要素とあまり関係ない作業。
(※パーツ分け等は重要な要素ではあるけど、(2)工程の「デフォーマ」※1や「パラメータ設定」※2やポリゴン調整※3の方が遥かに大事)
まったくの初心者は、公式のサンプルモデル画像を落としてきて、(2)のモデリングから始めることをおすすめします。

「その1」と書いてるだけあって、PSDの作成は以降も続くので、
Live2d興味あるけどめんどくさい人は飛ばしていいです。

今回は既存のキャラを使うので、
画像をググって、動かしたいキャラを探しましょう。
なるべく解像度が高い方が細かいところもいじりやすくておすすめ。

もちろん、
自分で絵も描く場合は(1)の前に


(0)イラストを描く。
…動かす用のイラストを描く。
※(1)も一緒にやってしまってok

が加わります。

※1「デフォーマ」…イラストに設定したポリゴンをまとめて動かすLive2dならではの機能。
   主に「ワープ(曲げるorひねる動き)」と「回転(パーツ回転)」がある
※2「パラメータ設定」…「体を左にむける」「首をかしげる」「腕を上げる」等、デフォーマやパーツを直接動かして動きを定義する。
    工程(3)でこれをもとにアニメーションをする。
※3「ポリゴン調整」…そのまんま。パラメータ付けの過程で変になったポリゴンを補間したりなど。




---------(基本の作成方法を知りたい人へ)----------

すわ! Live2dやってやるぜ!!
と、意気込んでみても、
3dのモデルと同じように、いきなり人間(8頭身)はハードルが高いかもしれません。

そこでこのチュートリアル。
hatyati.jp/live2d-cubism3-tutorial/

「しょぼん」という(´・ω・`)←の顔文字のキャラを動かして工程(2)を行うのですが、
シンプルながら、操作方法、デフォーマ設定、パラメータ設定、の基本がほぼ解説されていてわかりやすかったです。
このチュートリアルを理解すると、二頭身くらいのキャラは作れるようになると思います。

---------(工程(1)にうつる準備)----------

それでは、解説にもどって、
まずは立ち絵を動かしていく準備をします。






最終的な動きを考えながら
どこを切り分けるかを考えます。

いわばイラストでいうラフスケッチみたいなものです。
慣れてる方は飛ばしてもらってok




切り分けをイメージ出来たら工程(1)、「PSDの作成」に移ります。


---------(キャラのパーツをきりわける)----------




先ほどのイメージをもとに
原画からパーツを「多角形選択」などの選択ツールで切り分けていきます。






原画を透過し、分けた部分を確認しながら行うとやりやすいです。







↑お好みで、部品なども動かすように分けていきます。
ひらひらがある部分は、動かしたとき、
目立ちやすく、見栄えもいい(と思う)です。









わかりやすく「レイヤーセット」としてまとめてしまいます。


このままでも動かせるには動かせるのですが、
本当に「分けただけ」なので以降、作業していきます。


次回は、「頭」部分、目や口、髪の毛など、こまかいところをやっていきます。

普段はすり抜けるオブジェクト同士に特定の条件で当たり判定させる

現在開発中のこのゲーム、
プレイヤー(AI)同士はぶつかりません。

コライダーがあるオブジェクト同士で、
「このオブジェクト同士はぶつからせたくないなー」て時は、




「Edit」→「ProjectSetting」→「Physics2D」を選ぶと、レイヤー同士のリストが表示されます。
(注意:)3dで開発してるときは「Physics」を選ぼう





「Runner」のチェックを外すことで、Runner同士はぶつからないのです。

ちなみにオブジェクトにレイヤーを設定したいときは、
インスペクタの右上からレイヤーを選択でき

レイヤーを追加するには





「Edit」→「ProjectSettings」→「Tags and Layers」を選択。
インスペクターに、Tag、SortingLayer,Layerが表示されます。


こんな感じで、
オブジェクト同士をぶつからせたくなければエディタを編集するだけでOK。





さて、ここで本題。


私が開発しているゲームのプレイヤーは「ブースト」がつかえます。

ブーストはただ早くなるだけじゃなくて、ぶつかることで相手を妨害出来たら、より競争としての駆け引きが成り立つんじゃないかと考えた。

今回やりたい事は、ブーストで相手を転ばせたい! つまり、

ブーストの時だけ当たり判定を有効にしたい!!


というわけで
ぶつからない設定をしている物体同士が、ある条件の時だけぶつかるようにする方法を実装してみました。


とても簡単です。


まず、「BoostRunner」というレイヤーを用意する。
これとRunnerレイヤーは判定が出来るように設定。↓







↑ RunnerとRunnerはすり抜ける、BoostRunnerとRunnerはぶつかる、BoostRunner同士もすり抜ける……


あとはブーストの発生時にこのレイヤーに切り替えます。

//プレイヤーのレイヤーを「BoostRunner」に切り替える
gameObject.layer = LayerMask.NameToLayer("BoostRunner");



ブーストが終了、もしくは相手にぶつかったら

gameObject.layer = LayerMask.NameToLayer("Runner");

等のスクリプトで元に戻します。


これで、普段はすり抜けるプレイヤー同士がブーストの時だけ当たり判定するようになりました!

あとは、いつも通り、ぶつかったときに転ぶなりすればいいです。



以上。レイヤーを使った当たり判定制御でした。