和める絵を描きたいです
 

 

 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 

 

 

 

 
【注意】この記事は常に一番上に来ます


 自作ゲームの作り方

【目次】


制作を始める前に

・ゲーム制作ソフト

     ・ウディタとRPGツクールの個人的比較

・グラフィックツール

・アニメーションツール

     SpriteStudio講座

         ・素材作成編へ

         ・素材登録編1へ
         ・素材登録編2へ
         ・アニメーション設定編



(´・ω・`)
本記事は次の記事からです(・∀・ )

続きは過去のTOP絵
続きへ

 

>>>Read more

スポンサーサイト
テーマ * 日記 ジャンル * ブログ

 

 

 

 


ここまで来てやっとアニメーションを作り始めます(・ω・`)
まずフレームコントロールパネルの機能説明から
bandicam 2017-05-28 14-37-24-798
現在選択中のパーツ(セル)が青く光ります
クリックする事で選択パーツを変更することが出来ます
また、一番左の目のマークをクリックするとそのパーツを非表示にすることが出来ます
また、前回説明した親子関係もここで設定変更が可能です

縦に黄色い線が通っていますが
これが現在選択中のフレームを表しています
フレームとは表示される画像1回分のコマを意味します
例えば30フレームとは最初から紙芝居のようにコマを変化させていき
30枚目のコマという事になります(正確には0フレームから始まるので+1コマ)
この画像では開始から11フレーム後を選択しています
因みに今回は④の単位時間が1/30に設定されている為1フレームは
1/30秒になっています
また、このフレームという単位はウディタなどのゲームツールでは
少し違う意味でも使われています
例を出すとウディタでは一秒を1/60で区切ってプログラムを書きます
そして任意で処理を行う最小単位である1/60秒を
1フレームとしています
何かしらの処理を行う→(待ち時間)→次の処理
という処理の場合の真ん中の待ち時間を〇〇フレーム時間を置く(ウェイト)
と表現します。
つまり30フレームウェイトとすると30/60秒で0.5秒語後に次の処理を行う
という事になります。
総フレーム数はそのアニメーション
今回は45フレームに設定されています
つまり45フレーム描写し終えるとまた0フレーム目に戻ります
今回は④の単位時間が1/30に設定されている為1フレームは
1/30秒になっています
単位時間とは1秒をいくつに区切るかを示しています
(この説明で合ってる・・・?)
今回は1/30に設定されています
つまり1フレームの表示時間は1/30秒となります
よく次世代ゲームの画像処理で言われる60fpsとか30fpsとか
言われている分野ですね
後々ウディタなどでこのアニメーションを表示させるためには
この設定を覚えておく必要があります



さて、まず現在選択中の左足の動きを設定してみましょう
今回のアニメーションは45フレーム、
歩いているように見せるため
左足は前に出す→もとに位置に戻す→後ろに下げる→元に戻す
というループにします
単純計算で11フレーム毎に位置を変えればいいので
①を左足のパーツに、②を11フレームの位置に設定します
bandicam 2017-05-28 12-09-05-655 
11フレームの位置にある状態でその上にある
レイアウトパネルのパーツを動かします
赤い〇をクリックしたまま下へ動かすと回転させることが出来ます
回転する時の中心となる支点はセルリストで編集できます

bandicam 2017-05-28 12-10-24-500 
左足を前に出すことが出来ました
bandicam 2017-05-28 12-10-35-291 
するとどうでしょうフレームコントロールの
左足のパーツ欄、11フレーム目に点が現れました
因みにこの点をクリックしたまま他のフレームの所に移動すれば
設定フレームの位置を変えることが出来ます(便利)
bandicam 2017-05-28 12-11-53-429 
次に上げた足を元の位置に戻します
ニュートラルな足の位置は初期位置なので
初期位置の①を右クリック、コピーを選択
設定先となる22フレーム目を右クリックし
貼り付けします
この際、(上書き)は文字通りそのフレームに上書きされますが
(挿入)は選択フレームと次のフレームの間にフレームを付け足す処理なので総フレーム処理が1フレーム増えます
「あれ?いつの間にかフレーム数増えてね?」
って時は大体このボタンの押し間違いなので注意しましょう
bandicam 2017-05-28 12-13-12-573 
どんどん行きます
次は左足を後ろに引かなければならないので
33フレーム目を選択します
bandicam 2017-05-28 12-14-12-139 
その状態でレイアウトパネルの左足の部分の赤丸を
クリックしパーツを回転させ足を引きます
bandicam 2017-05-28 12-14-55-910 
最後、このアニメーションをループさせるため
最終フレームである45フレーム目(0フレームから始まる為44ですが)
に0フレーム目の初期位置をコピーペーストして完成です
さて、うまくいったかどうか右下の▶(再生)ボタンを押して
確認してみましょう
体、頭IK別個版_anime_0 
凄まじくシュールですがちゃんと動きました
お尻の部分の線が削れていますが
これはそのパーツをしっかり書き込まなかった結果です
こうならない為にも余裕をもって見えないところも書き込みましょう

bandicam 2017-05-28 12-17-41-313 
さて、左足が出来たので
同じく右足も同様の設定をしていきます
体、頭IK別個版_anime_0-1 
メタクソシュールな上
全く持って歩いているようには見えませんが
両足を動かす事が出来ました
歩いているように見えないのは肩の位置が上下していないためです
通常、歌舞伎役者でもない限り
歩けば体全体が上下します
bandicam 2017-05-28 12-19-05-819 
因みにパーツの変形は回転だけではないです
パーツを選択した際の四角の四辺の真ん中と四隅
にある小さな点をクリックしたまま動かすと
そのパーツの比率や大きさを変更できます
試しに上の小さな□をクリックし上に動かすと
bandicam 2017-05-28 12-19-26-405 
伸びました
クリックしたまま対面する点の方向へ動かせば
画像を反転させることが出来ます
体、頭IK別個版_anime_1 
ヘリコプターかな?
この反転を応用するとペーパーマリオみたいな感じで
振り返る画像も作ることが出来ます






さて、今までのテクニックをすべて駆使するだけでも
それなりのアニメーションを作ることが出来ますが
これにさらに二つ、設定を上乗せします


まずは参照セル
bandicam 2017-05-28 12-29-34-515 
今回は試しに瞬きを作ってみましょう
フレームコントロールパネルで瞬きするパーツを選択
(今回は顔全体を違うパーツに差し替えるので輪郭)
変化させるフレームを選択した状態(今回は10フレーム)で
アトリビュートパネルの参照セルをクリックします
bandicam 2017-05-28 12-30-03-845 
こんなミニウィンドウが出てきました
これはセルリストパネルと同じ物になります
①青く選択されている部分が現在表示されているパーツです

瞬き用にあらかじめ半分目を閉じたパーツ、
完全に目が閉じたパーツを登録しておいたので
②の目が半分閉じているパーツをクリックします
bandicam 2017-05-28 12-30-14-694 
10フレーム目に点が出現し画像が差し変わりました
bandicam 2017-05-28 12-30-29-614 
さらに2フレーム先を選択し(①)
先ほどと同様に参照セルをクリック(②)
完全に目を閉じたパーツを選択します(③)
bandicam 2017-05-28 12-31-01-997 
参照セルで画像を差し替えると
そのあとのフレームすべてで差し替えたパーツが表示され続けるため
また、目を開かせるため14フレームで10フレーム目の
半目の画像をコピーペースト、16フレーム目で
0フレームの初期画像をコピーペーストします
体、頭IK別個版_anime_2 
するとどうでしょう、ちゃんと瞬きしているようになりました
この参照セルは
瞬き以外にもしゃべるときの口の動きや
指先の手の動きなどにも応用できます





次はカーブエディタです
bandicam 2017-05-28 12-33-56-512 
物は試しなので今回は分かりやすく23フレーム目で振り上げ
また元に戻す動きを作ってみます
体、頭IK別個版_anime_1-1 
こんな感じになりました
bandicam 2017-05-28 12-35-27-872 
さて、パーツを選択した状態でアトリビュートパネルの
①Z軸回転の右側をクリック
そうするとカーブエディタのミニウィンドウが出てきました
なんかよくわからん青線が山型に引っ張ってありますが
縦軸は角度、横軸はフレーム(時間)のグラフになってます
今回このパーツは23フレーム目までに60度回転させ
最終フレーム(44フレーム目)までに戻の位置に戻る設定にしたので
頂点となる点は一個となります

では②0フレーム目の点をクリックし
③試しに「加速」に設定してみましょう
因みに補間方法の左右はその点から見て左右どちらの線か
って意味になります
今回選んだ①の点は左側に線がないため設定できません
山の頂点の点では左右の設定が可能です
bandicam 2017-05-28 12-36-01-138 
すると直線だった線が曲線になったことがわかります
これは文字通り最初はゆっくりで
段々動きが早くなっていくことを意味します
体、頭IK別個版_anime_1-2 
アニメーションで見るとどうでしょう
確かに動きに変化が出ました
bandicam 2017-05-28 12-36-41-005 
次は減速です、これは加速とは逆で段々動きが遅くなります
体、頭IK別個版_anime_1-3 
アニメーションにするとこんな感じ
確かに遅くなってますね
bandicam 2017-05-28 12-37-54-198 
では山の頂点をクリックし左右の動きを変えてみましょう
このように選択した点の左右に線がある場合は
両方の設定が出来ます
向かって左側緑色のゾーンは減速に
右側の赤いゾーンは加速に設定してみました
体、頭IK別個版_anime_1-4 
ちょっと動きに表情が出来ましたね
このような動きは主に慣性などに使われます
勿論動きにメリハリを付けたいときなどにも用いられます
ですがこの動きを最初に設定するのはオススメしません
慣れないうちはごちゃつきます

また、今回はパーツを回転させる動きをさせたので
Z軸回転のカーブエディタを使用しましたが
パーツの大きさを変えたりした場合は
アトリビュートパネルのX,Yスケールの右側のボタン
パーツを移動させた場合はX、Y座標の右側のボタンで
それぞれのカーブエディタウィンドウを開くことができ、
個別に動きのスピード曲線を設定できます


またカーブエディタの線形には加速減速のほかに
エルミートとベジェがあります
一応説明しますが

エルミートはキー間を三次曲線で補間します。
三次曲線は「S字」のような変化をする曲線です。
カーブエディタ上のキーをアンカーポイントとし、ハンドルを操作して、キーとキーの間のカーブを調整することができます。(公式説明)

ベジェはキーの間を「ベジェ曲線」と呼ばれる曲線で補間します。
カーブエディタ上のキーをアンカーポイントとし、ハンドルを操作して、任意のベジェ曲線を作成することができます。(公式説明)


なんのこっちゃ
まぁ簡単に言うと先ほどの点と点の間をただの曲線でなく
S字にしたりして動きを複雑にするのがエルミート
設定位置を元に任意の曲線を色々自由に設定できるのがベジェ(多分)
ぶっちゃけベジェに限ってはボクも意味がよくわかりません
この二つ、使いこなせればいろいろできるのは
分かるんですが
使わなければいけない場面が想像できないため
最初の内は無視でいいと思います
加速減速線形が使えれば大抵のものは何とかなります
というか殆どの人は気が付きません



さて、初めてSpriteStudioを触った人にとっては
上記のパーツの変形、移動、回転、参照セルによるパーツの差し替え
そしてそれらの動きにメリハリをつけるカーブエディタ
これらを使いこなせれば大抵のものは出来ます
歩きGIF 
因みに完成した歩きモーション
上記のテクニック以外は何も使ってません
体、頭IK別個版_anime_1 
ペラペラしゃべらせたり
体、頭IK一体版_anime_5 
こんなモーションも作れます

勿論ほかにも色々な機能がありますし
もっと便利な機能やショートカットも沢山ありますが
とりあえず自分で色々作れるようになってから
試してみる事をオススメします

次は制作したアニメーションをレンダリングする方法です
 

 

 

 

 



前回の続きです(・ω・`)



前回、バラバラのパーツに分けた一枚絵を
SpriteStudioにパーツ(セル)を登録しましたが
次にこのバッラバラのパーツをSpriteStudio上にもう一度
元の一枚絵の状態になるように並べなおさないといけません
えらく二度手間ですよね(・ω・`)


bandicam 2017-05-27 20-35-22-058さてその前に、SpriteStudioメイン画面の説明をば

セルリスト(赤い左下の部分)
前回登録したパーツ(セル)の元となるデータを設定する部分
そのパーツ(セル)の支点となる部分、名前などを設定できます


レイアウト(画面真ん中上の黄色い部分)
この後パーツを並べたり、アニメーションとして絵を動かすときの操作や
その確認を行う部分


フレームコントロールパネル(画面真ん中下の緑色の部分)
この後、パーツを並べたときのパーツ事の親子関係や
アニメーションの再生位置など変更したりするミキサー部分


アトリビュートパネル(画面右側青い部分)
選択されているパーツがフレームコントロールパネルで設定されている
時間の時にどんな状態にあるかを設定するパネル


この段階では上記のパネル(特にフレームコントロール、アトリビュート)
の役割はチンプンカンプンで問題ないです(・ω・`)


さて、では早速前回登録したパーツを並べていきましょう
bandicam 2017-05-27 20-35-31-794 
まず、セルリストにあるパーツをクリックしそのままレイアウトパネルにドロップしましょう
一番最初は見本となる一枚絵をアップしましょう
bandicam 2017-05-27 20-56-51-387 
レイアウトパネルにパーツがアップされました
ついでにフレームコントロールパネルの左側にも名前が出ました
因みにフレームコントロールパネルの一番左側に目みたいなマークがありますが
これをクリックして閉じた状態にするとそのパーツ(セル)を
見えなくすることが出来ます。


さて、右下アトリビュートパネルに不透明度欄という物があります
見本となる画像をアップしましたがこのままでは色が濃すぎるため
不透明度を下げる必要があります
そんなわけで不透明度らんの数値は1ですが(1は100%)
0.5(50%)くらいに下げてみましょう
bandicam 2017-05-27 20-57-01-616 
薄くなりました
bandicam 2017-05-27 20-38-18-998 
さぁお手本を見ながらパーツをどんどん配置していきます
まず髪の毛、同じようにクリック→ドロップ
ドロップする場所はどこでも大丈夫です
そのままレイアウトパネル内でクリックしたままパーツを動かし
お手本通りの位置にパーツが来るように配置します
bandicam 2017-05-27 20-38-33-895 
こんな感じで
bandicam 2017-05-27 20-38-44-515 
さて、ここで設定しなければならないのがアトリビュートパネル
優先度という項目、これメタクソ大事です。
とりあえず説明は後にして適当に20とかに設定しておきましょう
bandicam 2017-05-27 20-39-18-638 
次のパーツ前髪のパーツを並べます
bandicam 2017-05-27 20-39-43-409 
さて、前髪のパーツは本体となる髪のパーツよりに来なければなりません
ペイントツールでいう所のレイヤーに当たる部分ですね
このレイヤーの優先度番号を設定するのが"優先度"という項目
この数値は大きい方が上、小さい方が下となります
さっき、本体となる髪の毛の優先度20と設定しましたよね
ってなわけで前髪を上に持ってきたい場合は20より大きな数値にする必要があります
bandicam 2017-05-27 20-39-50-867 
では21に設定。無事、前髪パーツが上に来ました
さて、この設定をすべてのパーツにしていく必要があります
どんどん行きましょう
bandicam 2017-05-27 20-43-46-514 
とりあえず顔のパーツを配置しました
ここで先ほどフレームコントロールパネルでちょこっと触れた
親子関係についてちょこっと説明します
親子関係とは親のパーツが動く、形を変えるなどの変形があった場合
その子となるパーツにも同じ変形が適用される
そのような関係を親子関係と言います
親の設定は子に影響しますが
子の設定は親に影響を与えません
bandicam 2017-05-27 20-44-11-000 
さて、この親子関係、どこで設定するかというと
フレームコントロールパネルの左側で設定します
まずとなるパーツがどれかを考えましょう
この顔のパーツだけを見ると首を動かしたら顔が動きますよね
顔が動けば髪の毛が全部動きます
つまり一番元となるパーツはこの中では輪郭のパーツとなります

てなわけで親パーツは矢印の下側"輪郭4"と名の付くパーツ
それにくっついているパーツはすべて子のパーツとなります

では、とりあえず"髪の毛"と名の付くパーツが"輪郭4"のパーツの子であると
設定するために、子である"髪の毛"(矢印の上の方)をクリックしてそのまま
親となる"輪郭4"のパーツの上にドロップしましょう
bandicam 2017-05-27 20-46-00-051 
するとこのように"輪郭4"パーツの一段下に"髪の毛"パーツが来ています
これで親子関係を設定が成功したことを意味します
bloggif_59298177c1b6c.gif 
ためしにフレームコントロールパネルとなるパーツをクリックし
レイアウトパネルの輪郭部分の赤いの部分をクリックしたまま
パーツをぐるっと回してみましょう
上記画像のように"輪郭4"パーツを動かすと一緒に子である
"髪の毛"パーツも動いている事がわかります
bandicam 2017-05-27 23-14-22-523 
で、動かしちゃったら元に戻さないといけないので
誤って動かしちゃったりした場合はすぐ
画面左上の一個前に戻るボタンをクリックしましょう
bandicam 2017-05-27 20-48-04-735 
さて、親子関係の設定を"輪郭4"に繋がるすべての髪の毛に設定しました
すると・・・
bloggif_592981c8a750e.gif 
上記のように"輪郭4"をぐるっと回転させると繋がっているすべてのパーツが
一緒に動いてくれました
因みに、この親子関係の設定は全部のパーツをアップした後でも
何の問題もありません(むしろその方がいいです)
ただ、どのパーツがどの部位か分かるように
名前は分かりやすい様にしておきましょう
bandicam 2017-05-27 20-54-13-719 
そして親子関係の設定は上記画像のように
親の子に子の設定もできます
日本語がおかしい
まぁ上みたいにツリー上になっているのがわかる通り
肩動かせば肘も手首も手もすべて動きますが
肘から先を動かせば手首、手は動きますが肩は動きません。
同じように手首から先を動かせば手は動きますが
肘や肩は動きません
つまり付け根となる"体"パーツは一番親となり
肩から肘(この場合は腕)がその子の設定
肘から手首のパーツはそのパーツの子になります
bandicam 2017-05-27 23-27-24-818 
そんなこんなですべてのパーツを配置し終えました

さぁめんどくさい作業はこれで終わり!
あとは楽しい楽しいアニメーション設定の開始です!



 

 

 

 

 




前回作った素材をSpriteStudioに登録していきます

めんどくさい作業その2ですね(・∀・`)

bandicam 2017-05-27 15-26-01-183 
ではまずSpriteStudioを起動します
こんな感じのウィンドウが出てくると思います
この状態では何にもできないので
左上のファイル新規プロジェクト
の順番で新しいアニメーションファイルを作ります

bandicam 2017-05-27 15-27-42-559 
プロジェクトって場所に
アニメーション、セルマップ、参照イメージ、エフェクト
というファイルが出来たと思うので
まずアニメーション
のフォルダを右クリックし新規作成をクリック

bandicam 2017-05-27 15-27-42-5592 
次にプロジェクト欄の右側にある
セルマップ欄の矢印の枠内に
素材となる画像をドロップします
1
今回は前回の素材を使います


bandicam 2017-05-27 15-29-25-640 
こんな感じの画面になったと思います
プロジェクト欄のアニメーション、セルマップ、参照イメージが制作されました

次にセルマップ欄の中の画像を一つ一つ登録していきます
bandicam 2017-05-27 15-30-38-017 
セルマップ内のパーツの近くを左クリックしたまま
斜めにスライドさせるとパーツの周りが点線で囲まれたのが
分かります。この状態で囲まれた点線内をダブルクリックしましょう


bandicam 2017-05-27 15-35-32-707 
こんな小さなウィンドウが出てきました
これが出てくれば、"とりあえずこのパーツは登録成功"という事になります
いっぱいいろんなところいじれますが
とりあえず左上の名称を変更しておきましょう
自分でもわかりやす名前に変えておかないと
後々ややこしくなります(・ω・`)
とりあえず髪の毛の本体なので
髪の毛本体って安易な名前にしておきます


bandicam 2017-05-27 15-32-12-912 
左下、セルリスト欄に登録されたパーツが羅列していきます
パーツ設定の変更はこの欄の任意のパーツをクリックする事で
再設定できます
因みににSpriteStudio上で"セル"っていろんなところにありますが
これはボクが言ってるキャラクターの"パーツ"と同じ意味です

bandicam 2017-05-27 15-32-51-987 
さて、さっきのパーツ設定欄
縦横十字に黄色い線が通ってますよね
これはなんぞやって事なんですが、
この十字線の交差している点が
そのパーツ(セル)を動かす支点となります
これはめちゃくちゃ重要で、最初僕はマニュアルも読まず
とりあえず見様見真似でパーツ配置して動かした後に
この意味に気が付きました(遅)

上の画像は頭の上にくっついているアホ毛なんですが
髪の毛の支点は必ず毛根なので
上記の位置に黄色い十字を置きます

bandicam 2017-05-27 15-33-14-924 
頭なら支点は首の付け根です
肘から上なら肩、ひじから下は肘、手は手首
最初に登録した"髪の毛本体"のパーツは
それ自体を動かす事はなく顔のパーツと一緒に動くので
この支点の設定は中心にでも置いておくといいです
全部に設定する必要はありませんが
動かしたいパーツにはとりあえず"すべて"設定しておく必要があります
あとこの設定作業、後でやり直す事も一応できますが
後々絶対後悔するので
最初の内にやっておくことをお勧めします(微調整はする可能性はありますが)bandicam 2017-05-27 16-36-23-676
そんなこんなですべてのパーツをポチポチ登録していき
すべて登録し終えたらこの工程は完了です

因みに、このパーツは後から追加することが出来ます
前回作ったパーツ一覧(セルマップ素材)の余白に
新しいパーツを書き足し、SpriteStudioが起動中なら再起動させれば
セルマップ欄の画像が更新されているはずです

【注意点】
その際にファイルの名称、ファイルの大きさなどは変えないでおきましょう
ファイルの大きさに関しては「さっきと大きさちげーけど?」
って出てそのまま強行できますがファイル名は変えることが出来ません
あとでエラー出たら困るので触らぬ神に祟りなしってことで(-ω-`)



以上で登録編1終了です
面倒ごとはまだまだ続くよ!(・ω・’)

 

 

 

 

 
さて、では実際にSpriteStudioの使い方を
説明しますね


そもそもSpriteStudioって何ぞやって人はここを読んでみてください

・素材作成編へ(いまここ)



・アニメーション設定編





因みにこの記事、というかこのブログは
凄まじく初心者向け、なんか名前は聞いたけど
実際どんなもんが出来るわけよ?って人向けなので
既に使ってる人にとっては何一つプラスになることは書いてないです
期待しないでください(・ω・`)




さて、まず素材を作らないと何にもなりません
元画像 
勿論、この画像一枚からアニメーションは作れないため
動かしたい場所をパーツ分けしていきます
まぁ実際にどーすればいいの?って聞かれれば
1 
こうします

・・・は?(゜Д゜`)
って感じかもしれないですけど
何にしてもこのめんどくさい作業は必須です
簡単に言えば上に映ってるすべてのパーツを個別に動かす事によって
キャラクターを動いてるように見せるのが
スプライトアニメーションツールです。
よって、このパーツ分けが細かければ細かいほど
なめらかで自然な画像が出来上がるわけです


さて、このパーツ分け
どのようにやるかというと
ご使用のお絵かきツールによって操作が異なります

Photoshop、又はTexturePackerのライセンスを持っている方は
このパーツ分けの画像(以下セルマップ)が大変簡単(らしい)

↑内容を要約しようと思ったんですが
 余りに長かったため公式HPから直リンク

さて、ボクは上の両方どちらも持っていません
だからこの説明聞いてもチンプンカンプンなわけですよ
何せお絵かきツールはsaiですから(・ω・`)

そんな人はどうすればいいのか
気合いだよ
パーツ分けした後ある程度隙間を開けて配置していき
透過pngファイルで保存するだけです。
そんな手間じゃないです(・ω・`)
その際に注意しなければいけないのは
ファイルサイズの縦横が
2の累乗又は2のべき乗であること
これだけは絶対です
理由はアニメーション作った後に
それをゲーム上に実装したときうまくいかない場合があるからだそうです


あと隙間を開けないと後々めんどくさい事になるので
余裕をもって敷き詰めましょう
あと当たり前ですが透過できるピクチャファイル形式でないとだめです
ようは背景がちゃんと透けるファイルですね
pngが簡単、高品質



素材を作るうえでの注意点

・見えないところも書き足す
bandicam 2017-05-24 21-40-05-981 
元画像では前髪の下の肌は書かなくてもいいわけですが
それだと前髪が左右に動いたときに描いてないところが
露出してしまいます

というわけで画面後ろに配置されているレイヤーのパーツは
一枚絵では見えないところでも書き足しておかなければなりません
bandicam 2017-05-24 21-40-19-330 
ってなわけでこんなつるっぱげな顔パーツを
ちゃんと書いておかないといけない訳です
bandicam 2017-05-24 21-40-52-717 
忘れがちですが腕の後ろにある髪も
しっかり書き込まなければなりません

しかし、最初からすべてうまくいくわけではないので
実際動かしてみて変なところがあったら書き足していくって感じで
大丈夫だと思います。
なにせセルマップに直接書き足しても
ちゃんとSpriteStudio上に反映されるため
何かパーツに手直ししたかったら
このパーツを羅列させた画像自体に加工を施せばいいだけなんです!

あとで取返しの付かないことになることもないので
取り合えず作ってみる事が大事だと思います




・見本となる画像をどっかに置いておく
1 
                
この右下にある画像、これは絶対に配置してください
後々わかりますが、パーツを並べるときに
見本がないとえらいことになります。
だから見本となる完成体のキャラ画像をセルマップの何処でもいいので
配置しましょう



長々書いてしまいましたが
最初のめんどくさい作業はこれで終了です
あと1~2手間あります(・ω・`)

次はこのパーツをSpriteStudioで配置して設定する編です



前回の記事に拍手ありがとうございました(´∀`*)
 

 

 

*Template By-MoMo.ka* Copyright © 2017 Regret party 001, all rights reserved.

08 ≪│2017/09│≫ 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

あなぐま

Author:あなぐま
とりあえず大学院生
(´・ω・`)
趣味で絵描いてます
あと明日使えない情報など
載せてる絵は全部ペンタブ絵です
(プリンタ皆無)

とりあえず頑張ります!

未分類 (9)
自己紹介 (2)
オリキャラ紹介 (3)
日記 (149)
絵 (31)
下書き (97)
東方系 (60)
東方系(下書き) (63)
ポケモン系 (6)
ポケモン系(下書き) (7)
ボーカロイド (8)
ボーカロイド(下書き) (31)
ニコニコ動画 (18)
その他の絵 (9)
バトン (3)
ギャラリー (4)
時間かかる絵 (2)
マンガ作り途中 (11)
オリジナル (13)
SAIの参考 (12)
いただきもの (2)
ゲーム制作参考 (1)

このブログをリンクに追加する

Bear Cat
A Starting Point
からっぽの額
-2レベオフィシャルブログ『-2レベのカオス』
◇我輩はゆゆ。である◆
自宅潜伏
空と宙-ソラトソラ-
騎士団出撃司令部
draw world
ちゃらんぽ

この人とブロともになる

QRコード

 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。