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

剣と魔法っぽいイラストを描くぞ①

ふと思い立ってRPGっぽいイラスト、
つまりは騎士や魔法使いやモンスター的なイラストを描いてみようと思い立ったのでした。

サラリーマン時代は勤務していた会社は格ゲーしか作ってなかったので
こういうRPG的な世界観を相手にするのは学生時代以来です。
しかも仕事として受注した訳でもないのでちょっと気恥ずかしいのですが…


とりあえず…

手慣れたフォトショップにペンタブつないで製作開始。

アニメっぽいのは余計に恥ずかしいのでリアル系を目指して
下書きというかラフにあたりをとります。
顔は雰囲気を固定するためにほぼ清書の下書きです。

ややジョジョっぽい立ち方にしたかったので
剣を岩から引き抜いて

「あわわわ、ぬ、抜けた!」

みたいなシーンを想定しました。

あと、リアルな鎧姿だとボトムズっぽくて重苦しいので(そういうのめちゃ好きだけど)
せっかく手描きなので手描きならではの良さっていうかウソっぽさを狙って
スタイリッシュ感のあるイメージで描いてみます。

なのでこの段階で胴の部分の歪みだけは容認することにしました。

■ここまで描いた感想…

いい歳して仕事でもないのにこんなの描いて、は、恥ずかしい。

AEのパペットツールを使ってみた

Adobe After Effects(アフターエフェクツ)のパペットツール。
ふだんAE自体にあんまり関わり合いが無いのでそういう機能がついてるって
知らなかったんだけど・・・

フォトショップにも同じ機能があるからきっと使い方は全く一緒だろうと。

で、使ってみたところホントに一緒です。

YOUTUBEとかに使い方をのせてる人の絵を見てると
それって動かしても破綻しないレベルでしか使ってませんよね?
・・・って感じだったので自分でも試してみた。

結論から言うと

手や足みたいな関節に対してはフラッシュのボーンの方がしっくりくるけど、
髪の毛みたいな無関節のものや個々のオブジェクトを歪めたいときには
パペットツールが便利。

・・・そのまんまでした。

ただ、メッシュを細かく分割してスターチツールで固める作業
(3Dで言うところのウェイト付け?)で地味に下準備すると
良い感じになりそうな予感もある。
でも面倒なので今回はパス。


↓もともと動かす予定の無かったイラストでテスト。




今まで自主的に女の子の絵を描いたことは
無かったんだけど「描けるかな?」と思って
ちょっと描いてみたやつ・・・












ちょっといじってみた限りでは痒いところに手が届かず、
結局パーツごとにバラして管理した方が絶対に完成度が上がる気がしたのでそうすることに。

↓こんな感じで体をバラしてみた。

頭、
髪の毛(5パーツ)、
上半身、
右手(2パーツ)、左手
スカート、
右足、左

うえーん、めんどくさいよー!
仕事じゃないのにこんなことやりたくないよー!!


準備ができたら適当に動かしてみた。




※注 
ちょっとオーバーアクションなのはわざとです。










AEってタイムラインの使い方がイマイチしっくりこないのね。
なにせショートカットを全く覚えてないから・・・
(調べても覚えられないし、覚えてもすぐ忘れる)


★今回の遊びで思ったこと
基本はボーンで作ってパーツごとにパペットで補足できたら良いのにね・・・

APNGの作り方③

いよいよAPNGに変換します。

まずは前回の「APNGの作り方②」で準備した連番PNGをZIPファイルに圧縮しておきます。


★「APNG Assembler 2.9」を開く


以下から「APNG Assembler 2.9」というサイトへ行きます。

http://littlesvr.ca/apng/assembler/assembler.php

データ変換サイトなので余計なソフトをダウンロードすることなくデータの変換が
できます。便利ですねー。


↓こんな画面。シンプルで非常に好感が持てます。



まずは①のところでフレームレートを設定します。今回は12fpsを想定しているので
「12」に書き換えます。(1フレームあたり1/12秒で表示するって意味)

次に②で1フレーム目を表示するかどうか決めます。
どういう意味かというと・・・
APNGってGIFと同じで仕上がりはループアニメになります。
なので1フレーム目が必ずしも見栄えが良い絵になるとは限りません。
でもファイルをデータとして扱う時のサムネイル(アイコン?)は普通のままだと
強制的に1フレーム目が表示されちゃうわけです。
そこで1フレーム目にサムネイル用の良い感じの絵を入れておいて
再生時には1フレーム目だけ除外してループさせる。
…なんてことができるようになってます。便利ですねー。

③用意したZIPファイルを選択します。ボタン上にドロップでもOKです。

④Create APNGボタンを押すとアップロードが始まります。

変換が完了すると上の画面に変わります。
「result」の文字のリンク先をダウンロードしましょう。
繰り返しますが形式はAPNGですが拡張子は.pngです。

以上でAPNGが完成です。
使い方は普通に貼り付けるだけです。
スマホやMozilla FirefoxなどAPNGに対応したブラウザだと動いて見えます。
やったー!

追記20160614 
LINEクリエイターズスタンプの制作規約が発表されたようですが…
それによるとループ回数と再生時間、画像枚数の制約があるようです。
残念ながら「APNG Assembler 2.9」のサイト版にはループ回数の設定項目がありませんので
面倒ですがダウンロード版が必要となりそうです。


→APNGの作り方①
→APNGの作り方②







APNGの作り方②

★FLASHで動かす 

FLASHを起動して画面サイズは最終的に書き出すサイズにしておきます。
フレームレートはチープなアニメなので12fpsで十分です。

用意した.aiを読み込みます。

前の工程で9個にグループ化しているので9個のオブジェクトになっています。
FLASHではシンボル化しないと何も始まらないのでそれぞれ適当な名前をつけて
シンボルに変換します。これで9枚の絵はそれぞれ9個のシンボルになりました。



★ネコの乱射を作る

FLASHのアニメ制作ではムービークリップの入れ子を使うと便利なのですが
連番書き出しには非対応という残念な仕様になっています。
ですので単純なフレームアニメーション、いわゆるパターンアニメで動かします。

2枚ある乱射用シンボルのどちらか片方をステージにドロップして
適当に置き場所を決めます。これで1フレーム目ができました。

次に2フレーム目にキーをコピーして「シンボルの入れ替え」で
もう片方の乱射シンボルに差し替えます。
1フレーム目と比較して動きに違和感が無いように適当に位置を合わせます。

これで乱射アニメが一つできました。
あとは1~2フレームを3フレーム目以降にコピペして好きなだけ撃ちまくらせます。

★ネコの弾切れ→歩きを作る

新規のレイヤーに乱射と同じようにカチカチと弾切れのアニメを作ります。
次の逃走アニメも基本的に同じですが各フレームのX座標をずらすことで
後ずさりさせ、その後は「変形→反転」で向きを変えて画面外へと走らせます。

★ゾンビの大群を作る

新規のレイヤーにゾンビを1体だけ作ります。
ネコと同じようにまず2フレームの歩きアニメを作り、コピペしながら移動させます。
左端画面外から右端画面外まで歩くアニメができたら、レイヤーをコピーして
ゾンビを増殖させます。そのままだと全員ピッタリ重なってしまっているので
タイムライン上でアニメの開始位置をずらしてやります。これで同じ動きの
ゾンビが次から次へと時間差で動くので大群が押し寄せるように見えます。

★壁紙どん

テキストの書かれた壁紙が回転しながら定位置まで縮小されるアニメを作ります。
こんな感じでスタート位置は適当だけどゴールの定位置はきっちり決まっているアニメの場合は
先に定位置にシンボルを配置してゴールのフレームを作っておいて、
後からフレームをコピペしてスタート位置を作ると楽チンです。



それぞれのレイヤーのタイムラインをずらして開始のタイミングを調整すると
一連のアニメの完成です。
ハリウッドのSFかホラー映画を見ているかのような緊迫したシーンができましたね。


あとは書き出し→連番シーケンスでPNGを連番で保存します。


続く


→APNGの作り方③
→APNGの作り方①

APNGの作り方①

2015年10月の今現在のAPNGの作り方としては
以下の2択になりそうです。

①直接APNGを書き出せるソフトを使う。

②既に持っている描画ソフトで連番PNGを作って、後からAPNGに統合する。



①のパターン

フォトショップなどの描画ソフトをまだ持っていない人は①で。
今後もメジャーな描画ソフトを導入する予定が無い方は
以下のようなAPNGが書き出し可能なソフトを使うと良いかもしれません。

RealWorld Paint 
http://www.forest.impress.co.jp/library/software/realwpaint/

以下のサイトで丁寧に解説されている方がいたので参考にしましょう。
http://mobilewin.blog23.fc2.com/blog-entry-1747.html


②のパターン

フォトショップやイラストレーターなど手に馴染んだ描画ソフトを
すでにお持ちの方は、わざわざAPNGの書き出しの為だけに
新しいソフトをインストールするなんてあり得ませんので以下の流れとなります。

1. 何らかの描画ソフトで連番PNGを書き出す。
2. 「APNG Assembler 2.9」というWEBサイトで連番PNGをAPNGに統合する。

追記20160614 但し、LINEクリエイターズスタンプの規定にある「ループ回数」の設定が必要な場合は
WEB版ではなくダウンロード版が必要です。

以上

簡単ですねー。

それではこちらのアニメの作り方を紹介します。
FLASHやアニメ制作の初心者の方向けです。
あと今回のものは個人的な試作も兼ねておりますので最終的なデータ容量などは
考慮しておりません。とりあえず動けばいいやと。















見ての通り表現が暴力的ということでLINEクリエイターズスタンプで
NGとなったイラストです。(笑)

★アニメ絵を作る 


私の場合、作画のほとんどはイラストレーターを使います。
手足のパーツをちょっとずらすだけで簡単な2コマアニメが作れるからです。
今回使った絵は以下の9枚。










































この9枚って数字、多いって言えば多いんですが2枚目以降はコピペして
手足をちょっと動かしただけなので作るのはとっても簡単。
ゾンビも一枚描いて2枚めはコピペ&ちょっと動かすだけ。

あらかじめ動かす部分はグループ化しておくと管理も楽チンです。

最後の壁紙は適当にフォント(一応ライセンスフリーのもの)で書いて
血しぶきは適当にパスを描いて「ブラシ-アート-インク」などを適用してます。

使い慣れてる人なら30分もあれば用意できるでしょう。

これら9枚は最後にそれぞれグループ化してからイラストレーターに保存します。
(面倒なので個々には書き出しません・・・)



次はFLASHでさっき保存した絵を動かします。
フォトショップ使用の方はそのままフォトショで全部動かしちゃっても構いませんが
FLASHの方がタイムラインの管理は簡単な気がします。

続く

→APNGの作り方②
→APNGの作り方③

APNGって何?

ふと思うところあってここ数日APNGファイルを作ってます。














↑こんな感じのアニメ画像形式APNGに対応したブラウザだと動いてますよね。


人類最後のガラケー族の私にとっては全く馴染みのない画像形式なんですが
要はGIFファイルみたいなアニメファイルですね。
拡張子は「.apng」じゃなくて普通の「.png」。

GIFもそうだけど拡張子が「●●.gif」だからといって中身が1枚絵だと動きません。
中身がアニメだと動きますね。(当たり前か・・・)

同様に拡張子が「●●.png」でも一枚絵だと動きませんが、
そのままの拡張子でアニメファイルにもなるんですね。知らなかった。
それもそのはず再生環境がかなり限定的なんですね。

今どきのスマホのブラウザは普通に対応してるから
LINEとかのアニメスタンプがこの形式なんですね。

でもPCの環境ではIEもGoogleクロームも非対応だから私みたいに
スマホ使わない、ネットはクロームって人には無縁なのです。

ま、細かい話はいろいろあるんでしょうけどアナログ人間には
これくらいの情報で十分です。要はGIFみたいなもん。


次は上のハロウィンアニメの作り方を紹介しますよ。
APNGの作成に必要な連番ファイルの書き出しができるから
Flashを使ったけどアニメの内容的にはフォトショップでも十分だね。




APNGっての作ってみた

ちょっと前までアニメスタンプとかってやつが
一体どうやって動いてるのか謎でしたが・・・

だって拡張子がPNGのままなんだもん。
言われなきゃわかんないって。
しかもクロームやIEだと動かないんだもん。

でもスマホのブラウザなら普通に動くから
LINEスタンプとかで採用されてる訳ですね。

ずっと自分には関係ないやって思ってたんですが
ちょっと気が向いたので試しに作ってみました。APNG。
繰り返すけど拡張子はPNGのまんまなのです。


↓下の画像が動いている人のブラウザはAPNGに対応してるってことですね。




ギフトボックスの組み立て方

身内に頼まれてプレゼント箱の組立説明書用の図を作画してみた。

こういう耳を揃えるような細かい仕事はやりだすと楽しい。
(始めるまでは面倒くさいけど…)



2歳の娘の為に作ったミニゲーム

うちの子が好きなモチーフを組み合わせて作った音と絵で遊ぶミニゲーム。
構想5日間、実制作2晩。

再生後に画面右の赤い矢印をクリックすると画面が切り替わります。


↓「あいうえおゲーム」 (※注 再生すると音が出ます)