CALENDAR
            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 31      
<< 2017 July >>
NEW ENTRIES
▼ ARCHIVES

RECENT COMMENTS
怪しく光る液体の作り方教えます ※追記あり
 Flourite(11/18)
 あみゅれっと(07/10)
バカテス教科書ガイドのページを作りました
 える(10/23)
 黒ずきん(08/24)
ばおばぶー
 ぼの(06/07)
海外サイトの転載について思うこと
 minmi(06/06)
 たまき(06/06)
 ぼの(06/06)
バカテス教科書ガイド1.0.0リリース
 minmi(06/06)
 koro(06/06)
RECENT TRACKBACK
スキン新着情報 07月30日 ToHeart2のキャラ時計スキン
 ゲーム好きな若造が送る、コラムみたいなブログ(10/06)
スキン作成講座:準備編
 ダイアリエ「いないいないばぁ」(04/21)
衝撃のピザーラ焼そば…
 たび☆めし☆うま BLOG(12/08)
VMware 7.0
 無料でダウンロード!!(10/31)
Chrome OS なんだこれ…
 企業レポ速報(10/05)

おてがみはこちら ぱちぱちしてくれたら嬉しいデス♪
日記でお返事もしますです~







ということで、ここに記事書かせて頂くのは初めてですね。
何個かスキン作らせてもらっている、たまきと申します。

最初はまったくアニメーション概念のないスキンを作ったのですが
そのうち、どんどんエスカレートしてしまって
イロイロminmiさんの想定外の使い方とかしてしまって

「一回、そういう講座みたいな記事書いてくださいませんか?」

みたいなお話を伺ってから、もう半年くらい経ってます・・・
あぁぁぁ、minmiさんゴメンナサイ!!

というわけで、たまきのお送りするスキン作成講座です。

第1回はキャラのアニメーションの実装方法として

「キャラクターにウインクさせる」

ことに主眼を置いた講座になります。
なにぶん、こういう記事は、あまり書いた経験少ないので
判りづらい点も多々あるかもですが、そのへんはご容赦ください。m(__)m

続きはCMの後で・・・じゃなくて、「続きを読む」以降でw

続きを読む ≫
まず、当方がアニメーションするスキンを作るにあたって使用しているソフトを
順に紹介していきます。

1:adobe photoshop
  低価格版のelementsや、sai等の他のグラフィックツールでも
  問題はないです。

2:すっきんやねん!SkinMakerPRO 3.1以降
  minmiさん開発のスキン作成ツールです。
  上級者向け・・・となっていますが、ビジュアル的なものや
  レイヤーの概念なんかはphotoshopやsaiと似てますので
  前述のグラフィックツール使った経験があれば、
  初心者用の「EasySkinCreator」使うよりも、遥かに
  自由度も高いですし、最初からコッチ使えば
  そんなに難しいとも感じないはずです。
  ちなみにSkinMakerPRO 3.1以前を今入手するのは困難でしょうが
  新仕様のアニメーション処理対応スキンを作るなら
  このVer以降が必須です。

以上!!

本当に、当方がスキン作る時に使っているのは、この2点だけです。
では、実際に作っていきましょうか・・・

・・・といっても、当方の場合は、ただひたすら描いていくわけですがw
ちなみに「けいおん!スキン」で作った画像のフォルダを晒すと
こんな感じです。
-----

-----
元画像として作ったフォトショップの画像も含めると
163個ほどファイルが出来上がってますが、画面の中央に円状のパーツが
複数ありますが、これがファイル数増やした要因で、これ入れなければ
もっと軽く出来たんですが、妥協できない処理だったので実装した
キャラ周囲のキャラ名のクルクル回転するアニメの各パーツです。
現状、すっきんやねん!は画像の任意位置指定で
アニメさせることは可能なんですが
画像を回転させる機能はないので、回転させるにはそれぞれの回転率の画像を
用意しないといけないんで・・・

と、ファイルサイズを肥大化させておいてなんですが
サイズを落とすコツがコレ・・・
-----

-----
この2つのファイルは澪をマバタキさせるために用意したパーツです。
実際のアニメでもそうなんですが、見ての通り、澪の目を閉じた方のパーツは
目の周りの部分しかありません。こうすることで、画像のファイルサイズを
縮小できます。今回の「けいおん!スキン」もこれやってなかったら
更にどんだけサイズ肥大化したか(涙目

と、一通り、使用するパーツを作成(もしくは準備)出来たら
いよいよスキンを作成していきます。

まずは、任意のフォルダを新規に作成し、
そこにSkinMakerPROをダウンロードして展開しておきます。
ここで注意しておきたいのが、
SkinMakerPROは複数のスキンの管理は出来ないので
スキンを作る度に対応するフォルダにSkinMakerPROをインストールする
必要があります。


ドキュメントを熟読すれば、管理する術がないことも
ないのですが、結構大変なので
新しいスキン作る時は、その各フォルダ毎にSkinMakerPROを
インストールすると覚えておいた方が楽です。

さて・・・それではSkinMakerPROを起動してみましょう・・・
すると、最初は
-----

-----
という画面が表示されます。
これは、まだスキンに一枚も画像を登録していない場合に出る画面です。
構わずOKを押すと、続いて以下の画面が表示されます。
-----

------
使用パーツ画像の文字の下にDummyという名前がありますが
この「Dummy」は、後になにかと使用するというか、寧ろ必須なので
絶対削除しないでください。

ちなみに「Dummy」画像の正体は何も描かれていない透明な画像ファイルです。

当方がこれが必須の理由は後述しますが
ここで、画像パーツを作成しているのであれば登録していまいましょう。
やり方は簡単です。使用したいパーツをフォルダーの中からマウスで選択して
この画面上まで移動させてやるだけです。「shift」キーを押しながら
一気に複数のパーツを登録することも勿論可能です。
-----

-----
さて・・・そんな感じで必要なパーツをドラッグ&ドロップしたら
最後に「保存」を押しましょう。
勿論、今後の過程でパーツを修正したりした際も
同様手順で上書き可能なので、あまり深く考えなくていいです。

さて・・・保存キーを押せば、以下の2画面が表示されます。
一枚目(上)が現在作成中のスキンをプレビュー表示してくれる画面。
もう一枚(下)が実際にスキンを作成していく画面で
SkinMakerPROの本体といってもいいでしょう。
------

------

------
さて・・・実際に作成に入る前のお約束を最初にやってしまいます。
スキン設定ウインドウの上に4つのメニューがあります。
その中の「定義」を押します。すると更にウインドウが開くので
その中の「基本情報定義」を選択します。

すると、各種設定項目が表示されます。
------

------
基本画像幅、基本画像高さは基本的に「200」で問題ないです。
次のスキン名称は、その名の通りスキンの名称で、その名の通り
好きな名前使っていいのですが半角の「.」だけは使わないで下さい。
スキン完成時のオブジェクト生成時に色々不具合が出ますので
作者名、ホームページURLはご随意に・・・
パスワードは基本的に何も入れなくてもいいと思います。
文字通りパスワードなので・・・一般公開するなら不要です。

では実際に作っていきます。
SkinMakerPROはレイヤーの概念で下から上に画像を重ねていって
一つの画像を生成します。つまり、下に行けばいくほど表示優先度が低く
その上に画像を定義すれば、下の画像は上の画像の部分が隠れてしまいます。
なので、基本的に一番下に背景、次に表示順番を考えながら
レイヤーを作成していき、一番上に時計表記・・・というのが基本になります。
無論、順番は間違っても後で修正効きますので、頭の隅に記憶しておいて
徐々に・・・で問題ないと思います。

では基本ということで、澪を表示して、30秒ごとにウインクさせる・・・
というのをやってみましょう。
まずはメニューの「レイヤー」をクリックし「追加」を選択します。
(この操作はレイヤー一覧の下の四角アイコンでも同等操作になります)

すると以下の画面で
------

------
名前の入力が促されますので、そのレイヤーに名前をつけましょう。
わかりやすければなんでもOKです。(勿論日本語でも問題無しです)
ここでは「澪画像」という名前で登録します。
結果レイヤー一覧に「澪画像」というものが出来上がります。
------

------
ただ、ここではレイヤー名作っただけで、何も定義してませんので
何もプレビュー画面にも表示されません。
次は、このレイヤーで何をするのかを指定していきます。

このレイヤーでは澪を表示させればいいだけなので、
「レイヤー一覧」横の基本項目の真下、「画像」の部分をクリックします。
すると、さきほど定義した画像の一覧がプルダウンで表示されるので、
その中から澪の画像を選択します。
すると・・・
-----

------
こんな感じで澪のバストアップが表示されていると思います。
同様にプレビューウインドウにも
澪のバストアップが表示されていると思います。

ただ、プレビューウインドウ側の表示が大きすぎると思ったら
ウインドウ上の「+」「-」で大きさは変更出来るんで
編集する時は当初の解像度設定通りの200*200の大きさに
「-」を押して縮小させたほうが便利です。

さて・・・このままでは24時間、澪が表示されているだけなので
30秒毎のウインク・・・これにチャレンジしてみましょう。

まずは、ウインクさせるためだけのレイヤーを作成します。
名前は「澪ウインク」とでもすれば解りやすいかもですね。

で、ウインクにはアニメ定義を用いなければいけないので
ウインクするアニメーション処理を設定してあげる必要があります。
メニュー上の「定義」をクリックし、「アニメーション定義」を選択します。
すると、初めてアニメーション定義を実行する折だけ

「アニメ情報が未設定なので、一件追加します」

というメッセージが出ますが、仰る通りなので、構わず「OK」を押します。
すると、アニメーションの名前入力を促されるので、
解りやすい名前を入力します。ちなみにレイヤー名と同名でも問題はないですが
便宜上「澪動画」と設定します。

すると、以下のアニメーション定義画面が表示されます。
------

------
左上から、今から編集する動画定義のリスト、
その隣が現在登録されている画像一覧、
下には「アニメ定義のパーツ画像一覧とパーツの移動ウインドウ」があります。

今回はウインクするだけですので、パーツは移動したりしませんので、
移動定義は不要なので、実際にウインクさせるアニメを定義すればいいんですが
ここで、定義方法を考えないと、見た目同じでも負荷が変わります。

普通にウインクさせようと思えば、通常のバストアップを表示させ、
その次にウインクの画像を重ねて、再度通常のバストアップを表示させれば
OKなんですが、それだと、処理の負荷が高いので、別の方法を行います。

今までの作業の中で既に澪のバストアップは常に表示されています。
つまりは、ウインクさせたい瞬間だけウインク画像を放り込んで、
ウインクが終了すれば消えるようにすればいいわけです。

ということは、何も描画されていない透明な画像があればOKなわけですが
ここでこの記事の冒頭に出てきた「Dummy」画像が生きてくるわけです。

つまり、dummyを表示させておいて(実際には何も表示されない)
ウインクの瞬間の画像を一瞬挿入して再度dummyを表示するように定義すれば
実質、ウインクした目の部分の画像だけで、ウインクさせることが可能です。

それを実践定義したのが
以下になるわけですが、じゃぁOKを押してみます。
-----

-----
プレビューを見てみると、バッチリとウインク・・・してませんよね?
実はアニメの定義はしたけど、澪ウインクのレイヤーでそれを使う設定を
してないからなので、早速設定しましょう。

「レイヤー一覧」で「澪ウインク」のレイヤーを選択した上で
隣の基本メニュー内の画像の下の「アニメ」を選択すると、
さきほど作成した「澪動画」が登録されているので
迷わず、これを指定。その下の「アニメ種別」を「30秒に一度」とすることで
今度こそバッチリ!・・・いきませんよね?

実はアニメを設定するときは、「アニメ」の上、「画像」のところに「Dummy」を
登録しておかないとアニメーション機能が機能しないので、
気を取り直して、「画像」に「Dummy」を設定して、今度こそ・・・

でも、結果は一瞬見当違いなところにウインク画像が出ただけになったりします。
これは、ウインク画像を目の周囲だけの小さい画像にしているために、
元々の澪のバストパップの画像と大きさが違うために起こる現象で、
これを解消しようと思えば、アニメーションさせる場所をちゃんと澪の顔の上に
座標指定してやればいいわけです。

そこで、「澪ウインク」のレイヤーを指定して基本メニューの下の方にある
「描画座標」をイジッテやればいいんですが、
いきなりバッチリな位置把握するのも大変です。

そこで、さきほどから動作確認している「プレビューウインドウ」が役立ちます。

「澪ウインク」のレイヤーを選択しておいた上でプレビューウインドウの
パーツ部分をマウスをクリックしたまま動かすと
好きな位置にパーツが移動する上にスキン設定の座標設定もリアルに
それが反映されます。
(この時だけ、アニメ種別を「繰り返し」にしておくとやりやすいです)

なので、この機能を使って大まかに位置を決めて最後は数値を微調整すれば・・・
ウインクの完成なわけですが・・・これでもモノ足りません・・・

そうウインクに限って言えば、ウインクが早すぎるのです。
実は、すっきんやねん!のアニメーション定義は
各コマの描画秒数までは指定できないので、このアニメはゆっくりとか
これは早くとか・・・は、そのままでは実装できません・・・

じゃぁ、どうするか・・・

『納得できる時間表示されるようにウインク画像を連続定義すればいい』

わけです。

そこで、さきほど作ったアニメーション定義を修正することにします。
メニュー上の「定義」をクリックし、「アニメーション定義」を選択します。
そして、さきほどのアニメーション定義を修正・・・
-----

-----
さっきと違っているのは、ウインク部分の画像を3回連続表示するように
なっています。あくまで体感ですけど、人間のウインク速度的には
これくらいが自然に見える感じがします。

さて・・・これで30秒に一度澪がウインクするスキンは完成するわけですが

もしキャラクターを時間毎に入れ替えたい場合は
「澪画像」「澪ウインク」レイヤーにそれぞれ「有効表示時間」を設定してあげて

他のキャラも同様にレイヤーを追加して入れ込んで「有効表示時間」を設定すれば
時間で切り替わってウインクするスキンが完成します。

あとは、背景を入れたり、時刻をレイアウトしていけば
完成・・・となるわけです。

-----
基本はレイヤー作成→該当レイヤーの処理決定

これの繰り返しです。

今回実例で示したアニメーション処理同様に一つづつ積み上げていって・・・
少しづつコツ掴んで・・・というのが一番理解しやすいかもですね。

例えば、最初はキャラ切り替えじゃなく、お気に入りのキャラ一人に絞って・・・とか
で、次回作で複数キャラが切り替わるスキンを・・・みたいにしていけば
このスキン作成は、そんなに難しくないです。

基本、レイヤー作成、処理指定の繰り返しですから(^^)

では、次回は・・・「隠れキャラの実装方法」について書いてみたいと思っています。

それでは、その時、またお会いしましょう~~♪
≪ 続きを隠す
[ 開発日記。::スキン作成講座 ] comments (0) trackback (0)


長い間休講しちゃってましたが、スキン作成講座をちょこちょこはじめたいと思います。

まずは基礎の基礎からいきますよ~♪

続きを読む ≫
スキンを作るために用意しなければならないもの…から、説明をはじめますね。

■スキンを作るために必要なもの■

1:画像編集ツール

まずは時計のパーツを作るために、これはなくてはなりませんよね。PhotoshopでもSAIでもGIMPでもお好きなツールを使ってくださって構いませんが、PNGの24ビットなど背景が透過された画像フォーマットを保存できるものがいいですよ~。

すっきんやねん!で扱える画像フォーマットに関しては、また後で説明しますね。

2:すっきんやねん!SkinMakerPRO 3.1以降

こちらからダウンロードできます。ぜひダウンロードしておいてください。インストールの必要とかはなく、落として解凍すればすぐ使えますよ~。

作成ツールのページでは、初心者用のEasySkinCreatorも同時にダウンロードできますが、それで作ったものは全くと言っていいほどデザインの自由度がありません。上述の画像編集ツールも使えない人を対象にしてます( ̄▽ ̄;

ですので、この作成講座では、すっきんやねん!SkinMakerPROを使って作成することを前提に進めますね。レイヤーの概念など採り入れてますから、一般的な画像編集ツールが使える方なら、そんなに難しくもなく、すぐ理解できると思いますよ~♪


■すっきんやねん!で扱える画像フォーマット■

JPEG、GIF、PNG(8ビット、24ビット)が使えます。

パーツに透過が必要ないものなら、当然JPG使うのが一番いいですよね。

透過が必要なものの場合、クオリティ的には断然PNG24ビットなんですが、減色+最適化を行ってもファイルサイズが大きくなりがちなので、気をつけてね。

PNG8ビットと、GIFは扱える色数が256色です。だから保存する時に256色以外の色があると、すっきんやねん!に読み込ませた時、まるでノイズのようなゴミが表示されちゃいます。

よく絵師さんって最初はすごいでかい解像度で描くじゃないですか? それで完成した後スキンに使うサイズに縮小したりするんだけど、縮小した時に絵の縁とかがぼやけちゃって、それをPNG8ビットで保存してすっきんやねん!に読み込ませた時にノイズが出る原因になってたりするパターンが多かったり。時計枠とか絵のベース部分など、縁が目立つものはPNG24ビットで使うのが一番いいと思います。


■さてどんなスキンを作ろっか?■

道具の準備も整ったら、次は実際にどんなスキンを作るか考えていきましょう。

本講座では、小さなテクニックを一個ずつ解説していきますが、基礎的なことは解説していきません。基礎的な作り方は各自てきと~に覚えてみてください。そんな難しくはないから、慣れですぐ習得できますよ!w

人が作ったスキンの作成ファイルを眺めてみたりするのが一番いいかも。公開中のスキンの中には、スキンの作成ファイルが同梱されているものがあります。これとかこれとかね。またSkinMakerのフォルダの中にもサンプルとして初期スキンの作成ファイルが入ってますので、それらを覗いてみるとわかりやすいんじゃないかな~。

スキンの作り方を覚えて、ぜひぜひいろんなスキンを作ってみてくださいね~♪

あ、その前に著作権のことに関しての注意があったので、ちょっとさせていただきます。


■版権モノのスキンについて■

版権モノのキャラなどを用いた時計スキンを作ろうとする場合の注意点ですよ~。

絵は必ず自分で描いた物にしましょうね。アニメや漫画などからそのまま絵を持ってきてスキンを作ることは絶対しちゃダメです。また、他人が描いた絵を作者さんに無許可で使用するのもダメです。

誰にも公開せず自分一人で楽しむ分には、絶対ダメ!とは言いませんが、そういったあからさまに著作権的に問題のあるスキンは、送ってきていただいたりしても、うちでは紹介したりスキンリストに掲載したり、サーバーに追加したりはできません。

また、以下のスキンは自作絵だったりオリジナルだったりしてもお断りする場合があります。あらかじめご了承ください><

・18禁の表現のあるもの
・N◯Kさんの作品やデ◯ズニーさんの作品、コ○ミさん任○堂さんなど、著作権的にとても危険そうなオーラを放ってるところの作品w


■最後に■

そんな訳で、今回は本当に準備だけになっちゃいました。次回からは、ちゃんと各種テクニックなどを説明していきたいと思いまっす!

特別講師のたまきさんなどもいっぱい書いてくれるらしいので、お楽しみにですw

≪ 続きを隠す
[ 開発日記。::スキン作成講座 ] comments (0) trackback (1)


はい、唐突にはじまりました新コーナー、スキン作成講座の時間です。

続きを読む ≫
このコーナーでは毎回すっきんやねん!のスキンを作る上で、知っておくといいことや表現に関する各種テクニックなどを解説し、見てるだけでスキン作成ができるようになっちゃう!…ようになればいいなって思って企画しましたw

やっぱり自分でオリジナルなスキンを作ってデスクトップに飾った方が100倍楽しいと思うしね。でも手前みそではありますが、すっきんやねん!のスキン仕様はいろいろ工夫すればかなり自由度の高い表現が出来ますが、それなりに複雑ですからいきなりいろいろ作ろうと思っても取っつきにくいかもしれない…と。。やはりテクニックなどの説明はあった方が絶対いいよね?と考えていたんです。

またこのコーナーで、ユーザーのみなさまからの質問などにも出来るだけ答えていきたいと思っています。「こういう表現したいんだけど、できる?」とか、「がんばって挑戦してみたんだけど、作り方がわからないよ…」など、疑問点や質問などをぜひお寄せくださいね。犬っこ先生がやさしく教えてくれますw

お便りは、ここのコメント欄もしくはメールフォームから送ってくださいね。作成途中のスキンファイルなどを送りたい場合は、メールで直接お願いします。

先生といえば、特別講師の先生も来てくださる予定ですw 楽しみにしててね!

という訳で、今回はまずはごあいさつまで。次回から毎回テーマを決めてお送りしたいと思います。更新は毎週末…といきたいとこだけど、不定期になっちゃうかも(準備がいろいろ多そうでちょっと読めないんですよね( ̄▽ ̄;

それでは、どうぞよろしくお願いいたします♪

≪ 続きを隠す
[ 開発日記。::スキン作成講座 ] comments (0) trackback (0)
すっきんやねん!

このブログパーツの使い方はここ見てネ
▼ CATEGORIES

▼ LINK
SoulDivas 内のページ
 トップページ
 ソフト公開ページ
 SealOnline Skill Simulator
 Seal 専門検索エンジン Seagle
 メールアドレスコンバータ
 DATA SPACE NINE
スキン作ってくださった絵師さんたち
 ぽかぽかのくに
 万魔殿
 Angel☆Tear
 ましろむのお絵かきばんざい
 ~りゅきあ~
 LightRight
 画廊喫茶はぴど
 画展
 MOE-K-MCZ
 An-Nur
 マドロス冨田の校長室
 めがぴこ
 原色進化論
 Reason
 Tres tristes tigres...
 くれ日記
 zarzarana
 篠blog
 ◆夢中人◆
 Omega-Studio
 無人少女
 ダイアリエ「いないいないばぁ」
 + ---- EUREKA ---- +
 SC-エスシー-
 からすのしっぽ
 ネコマミレの描きなぐり
 SHADOW MOON
 マサ・ユメ
 バロックリミッター
 迷-MAZE-
 AKIHIのちょっぴりオタオタ日記
ソフトいっぱーい
 窓の杜
 Vector
 AnyWare+
 Cow&Scorpion
 アルテック
 Seesaa ダウンロード
 HANATSUKI
 Greva!
 ガジェットギャラリー
 widgetown
ソフト紹介(個人サイト)
 知恵の実.com
 FreeSoftNavi
 Undulation PC.
 FreeSoftNavi
アップデート情報
 ソフトコレクション
 OnlineSoft VersionUp.info
 ソフトアンテナ
 新しもの好きのダウンロード
ニュースとかいろいろ情報とか
 スラッシュドット ジャパン
 WIRED VISION NEWS
 Impress Watch
 ITmedia News
 GIGAZINE
 Technobahn
 Engadget Japanese
 国際ニュース : AFPBB News
 TechCrunch Japanese
 ネタりか
 ライフハッカー
使わせてもらってる素材とか
 あくび印
 FTK CREATIVE SYSTEM
 deviantART
 Soundsnap.com
おもしろい
 デイリーポータル Z
オリジナルグッズ作成
 DECOチョコ
 オリジナル切手作成サービス
 チョコラボキットカット
 マイブック
お買い物
 半額以下.com
 あまぞん
 オンライン書店 e-hon
 cotta
たべもの
 うまいもんドットコム
 カレーファン
 料理のいろは
音楽
 ナタリー
 djmixr beta
 [r] recommuni
 World Reggae News

検索くん
ブログ内を検索



Mozilla Firefox ブラウザ無料ダウンロード