アニメーション

アニメーションの設定中。

ずっとスカートにclothシュミレーションを使うかどうか悩んでいたけど、
（１、２週間ぐらい時間あるときいじってた）
ローポリの場合手付けでつける人も多い様だ。


clothシュミレーションは設定が大変だなぁ。
ローポリだとビヨビヨビヨ・・・ってスカートが挙動不審な動きになってしまう。
（上手く設定できないだけ）

ってことで、手付けでアニメーション。



スカートを手付けアニメーションさせるのは思ってたより苦ではない。
むしろ、走るモーションをもっともらしく見せる方がよっぽど大変・・・。



あと、Unityにテストでモデルをインポートさせるには・・・
と調べたら凄く簡単だった。

FBXで書き出してUnity上にドラッグ＆ドロップするだけっていう、
Flashじゃ考えられないぐらいの楽さ。



ここ最近モデリング、アニメーションばかりやってたけど、
そろそろUnity上でプログラムでモデルを動かしたい。


とりあえずそれで一通りやってみたことになるので。

リムーブ

プログラムを打っていて、
「どのタイミングでもリムーブ（削除）できるようにする」
っていう関数を用意しておくのは凄く大切なことだなあと。
（もちろん、削除できないような時は、その場に合った動きをするように設定する）

バグも減るし、使い回しができるし。
最近関数のまとめ方とか悩んでいるのです。

shapeKeyでアニメーション

shapeKeyを使うと頂点単位でアニメーションができる。

shapeKeyの操り方にも色々あるらしく、
直接DopeSheetでキーを打っていく方法もあれば、
ボーンなどを使ってそのボーンのX軸の移動した数値によって
アニメーションの量（keyのvalue）を変化させることができるなどなど・・・


服が部分的にめり込んだりしちゃう時は、これを使って回避しようかなぁと思っている。
ハイポリの場合はsoftBodyとかclothシュミレーションを使うのだろうか。


shapeKeyを使って以下の動画のような表現が・・・できたらいいな

Color.NOISE from Andrew Morev on Vimeo.

話が変わるけど、
最近キーフレームアニメーションっていうのは絵とかDTMと同じで、
時代の流れに左右されない色あせること無い技術なのだな、と強く感じた。

FlashにもAfterEffectsにも3D系のソフトにもそれは実装されているし、
webページ製作の次期開発環境としてはメインになるであろうAdobe：Edgeでもそれは存在する。
（Edgeから別物になる可能性は十分あるけど、とりあえず今のところは）

 手付けでUIやキャラクターのアニメーションでカッコイイものができると、
数学を使ったアニメーションなどに使われる複雑なプログラムを記述できなくとも、
それらをまかなうことができるのではと思う。


数学を使ったプログラムで実装されたアニメーションと
手付けでつけられたアニメーションでは、
できることや目的が少し違ってくるかもしれないけど、

無理して凄く複雑な計算に挑んで
無駄に工数がかかってしまっては意味が無いので、
バランスよく選択を行えば「シンプルなプログラムでなおかつカッコいい演出」
というものが実現できるのではないかなぁと・・・
（べつに数学を使ったプログラムで動かしているアニメーションが
ダメというわけではない。）

最近はそこが目指すものかなぁと漠然と考えている

アニメーション

blenderでアニメーションを行う際にはDopeSheetやGraphEditorというものを使うらしい。
Actionやらもある。
（iを押してinsertKeyframeで、rotation,scale,locationのどのｷｰを打つかを設定できる。
当然組み合わせも可）

画面は参考書のサンプルのGraphEditorをいじっているところ。
参考書はBlender2.5マスターブック。
これ一冊で今のところ十分すぎます・・・



ボーンをどういう風に動かそうかなぁ
といろいろ動かしていたら、腕が服をつきぬけたりなんてことが・・・

ある程度はしょうがないかもだけど、
ウェイトの設定が甘かったり、モデリングをする際に
動かすことをもっと意識して製作する必要があるのかな～と思った。


とりあえず、ボーンやコントローラーは一通り設定したので、
今週からようやくアニメーションの設定ができるわけだ。

しかし、まだまだわからないことだらけ。

ひきつづきコントローラー・IK

引き続き、ボーンをいじりながらコントローラー、IKの設定・・・。


コントローラーや、アニメーションの設定などがさっぱりわからなかったけど、
（今もわからないことは沢山あるけど・・・）

ｷｰフレームを使うことで現在のフレームから次のフレームまでの間を、
Action（BoneConstraints→Relationship→Action）を設定することで、コントローラーのプロパティでアニメーションさせたりすることがわかった。



わかっていたけど、blenderはものすごく高機能だ

ボーンコントローラー２

引き続きボーンにコントローラーを設定している。

ただプレーンとかをいじって矢印にしたものをボーンを
操るコントローラーとして使いたい（born→Display→CustomShapeで好きなオブジェクトを設定）・・・って話なんだけど、
これが、EditModeでのスケールのサイズとかが影響するようで、
最初セッティングしたときに、小さすぎてどこに表示されているかがさっぱりわからなかった。
それだけで２時間ぐらい使ってしまった。


どのソフトもそうだけど、 癖をつかむのに最初は大変だなぁ

ボーンコントローラー

ボーンをさらに組み合わせてコントローラーを製作している。
なんとなーく、どんなことをやっているかは・・・


とりあえず、角度制限や移動方向の制限を行った。

ウェイトペイント

ひきつづき、blenderで動きをつける為に、
ボーンの設定→ウェイトペイント・・・

週末作業をしなかったので進みが悪い。


う～ん。まだ操作に慣れない。

ボーン

blenderでボーンの設定を始めた。
まったくやったことのない作業なので、手探り。
メタセコイア→blenderのファイルのやり取りは「mqoインポーター」を使わせていただいた。

最初にモデルを作りこもうと思ったけど、
実際どういったコンテンツを作りたいかが　決まっていなかったり、
初めての作業も多く、どのような工数がかかるかハッキリしていないので、
とりあえず一通り最初に作ってみることにしたいと思う。

Unityのファイル管理って・・・

Unityのファイル管理について考える。
なんというか、gameObjectにScriptをどんどん追加していくのだけれど、
「あのScriptはどこに置いたかな？」ってなった時にすぐにそのファイル（Asett）を探し出すことができない。


Flashでも（AS3を勉強し始めの時なんか特に）MovieClipにどかどかコードを追加したりすると、
「あのコードどこに書いたかな？」ってなり、
さらにスパゲッティーコードになってしまうので、途中からはMovieClipには一切コードを書かないようになった。


Create Emptyで空のObjectを作って、
それにScriptを追加して一番上のroot（ GameController? ）とする（Flashで言ったらMain.as）ようにしている人もいた。
自分もそうするつもり。

そこのあたりを早くこういう風に書く！とハッキリしたいものだなぁ。
ファイルもフォルダを使ってカッチカチに綺麗に整理したい。

気づいたこと

鼻の下は、左目と右目の間の鼻のすじよりも、
手前に位置する。

そうしないと横顔が不細工になるなぁ～



あとキャラクターに小物をつけるのは大切だなぁと。
これでは地味すぎる。



と思ったけど シンプルなものでも、
ひとつひとつの造形をしっかりすれば、かっこよくできる筈・・・
と、人のイラストを見て思った。

手直しする。

テクスチャー

テクスチャーを描き始めました。

思っていたとおり、一番面白い作業だ！

本当にポリゴンに落書きをするという感覚で作業ができている。
これも、メタセコイアがPSDファイルをそのままテクスチャに使える・・・
ということがでかい。

３Dモデルを使って何かを作るのは、絵でキャラデザイン→モデリング→テクスチャ→プログラム
という段階がある為、自分のように手当たりしだいいろいろと手を出してしまっている人間には、
ゲーム（今はゲームになるかハッキリしないが・・・）を作るという大きな目標が天辺にあり、
モチベーションを保ちつつ、あれこれ手を出せるのでちょうど良いかもしれない。

プログラムを勉強するとDTMやらなくなるし、絵を描くとDTMやらなくなるし、DTMやると絵とプログラムやらなくなるし・・・



ゲームを作るとなると自然と全部必要となり、自分には凄くいいことなのだと思っている。

UV

UV展開している・・・・

これ大変ですね。

ここをしっかりしないとテクスチャをせっかく綺麗に描いても無意味になっちゃうだろうし、
慎重になるところ・・・


トゥーンシェーダーを行う予定だけど、
それなら多少いい加減でもいいかなぁ・・・とも思ったけど、
たぶんそんなことは無い。

モデリング

モデリングしています。

ベイグラントストーリーというゲームがあるのでけど、
そのゲームはプレイステーション１ということで
ポリゴン数に凄い制限がある。


しかし、演出、グラフィック共にスペックの低さを感じさせない、
本当に良くできているゲームだと思った。

あれはいいゲームだ！


 -----------------------------
pixivとかのイラストレーターさんが、厚塗りでキャラクターイラストを描いていて、
かなりしっかりとライティングをしていることがある。
あれは、陰影のつけ方などモデリングするときに凄く参考になるのではないか！
と勝手に思った

Unity勉強中

最近は移動中にUnityのチュートリアルサイトを見ている。


キャラクターを３D上で動かしたいので、

キャラクターの絵を描いて、モデリングして・・・っていうステップが必要なんだけど、
キャラクターを描くところでつまずいてしまっている。

今まで風景画ばかりしか描いていなかったからなぁ・・・

blenderもちょこちょこさわっているけど、
シネマ４Dとかと比べるとずいぶん独自なインターフェイス・・・

なかなか・・・


 今年中には何か出したい！

そんなもの

凄いものなんて作れなくたっていいし、そんなもの日常生活じゃほとんど必要とされないけど、


作ってみたくなってしまうんですね～

絵描き向けプログラム雑誌

（自分以外の）絵描きの人がプログラムをちょこっと覚えたらおもしろいものがネット上にあふれるのでは。

そういう作品がネット上にあふれたら面白いよなぁ。きっと。

というか見てみたい。

Away3D

Away3D最近いじってます。

こころなしか、paperVisionよりテクスチャが綺麗なような・・・

たぶん気のせいですね。

この調子でFlashPlayer11の3DAPIもやりましょうかぁ

【DTM】おとづくり

シンセサイザーって難しいですね～


かっこいい音をつくるのがですね～



ギターも音作りはサボり続けてきましたからね～



ああああ

【日常】openFrameworks

勉強中・・・


しょーもない日記だ。

【技術】フリーのホームページ制作ソフトまとめ

　＼　　　　　　　　　　　　　　　　　　　　/
 ＼　　丶　　　　 　　 |　　　　　 /　　 　 ./　　　　 　 ／
 ＼　　ヽ　　　　. 　 .|　　　　　/　　　 /　　　　　 ／
 ＼　　ヽ　　　　  　　|　　　　 /　　　/　　　　　／
＼
-‐
ー
 _＿　　　　　　フ　リ　ー　で　す　　　　　　　　　　　　--
 二　　　　　　　 　　／￣＼　　　　　　　　　　　＝　二
 ￣　　　　　　　　　|＾o＾|　　　　　　　　　　　　　　　　￣
 -‐　　　　　　　　　＼＿／ 　　　　　　　　　　　　　　　‐-

／
/　　　　　　　　　　　　　　　ヽ　　　　　 ＼
／　　　　　　　　　　　　　　　　　　　　丶　　　　 ＼
 ／　　　/　　　 /　　　|　　　,　　　 　 丶　　　　　＼
 ／　　　 /　　　　/ 　 |　　　 ,　　　　　　丶　　　　　＼　
 

「アドビのソフトは高いし、フリーでホームページ制作ソフトを揃ええたい！」

って思った人もいると思います。
今回はフリーでなおかつ高機能なソフトを紹介していきたいと思います。


---------------------------------------------------------------------------
▼HTML・CSS･javaScript･XMLなど▼

■AptanaStudio（http://aptana.com/）
簡単に言うとドリームウィーバーのフリー版みたいなもの。
コードヒントを表示してくれたり、ソースフォーマットができたり･･･
とにかくいろんなことをサポートしてくれる、お勧めソフトでございます。

ホームページ作りたいならこれ！って感じです。
HTML5をこれからバリバリやりたい！って人は迷わずインストールしましょう！
Mac版、win版両方あります！





---------------------------------------------------------------------------


▼PHPなど▼


■PHPeditor（http://phpspot.net/php/phpeditor2.html）
その名のとおりPHPのコードを書くときに使います。
ファイルの構成の一覧表示が常にされていますので、作業がしやすいです。

PHP書くならこれかなあ。
PHPはサーバサイドプログラムですので、デスクトップ上で動作を確認する為にも
PHPをローカルで動かす手助けをしてくれるXAMPP(http://www.apachefriends.org/jp/xampp-windows.html)
を一緒にインストールするといいかもです。






---------------------------------------------------------------------------

▼Flashなど▼

■FlashDevelop（http://flashdevelop.jp/）
なんとFlashコンテンツをフリーで作成できます！
「リッチコンテンツが作りてーっす！オブジェクト指向プログラムをバリバリやりてーっす！」
って人は インストールしましょう！
コード主体なので、フラッシュ特有のキーフレームアニメーションがやりたい人は
別のフリーのFlashアニメーション制作ソフトを揃えましょう！
（Flashアニメーション制作ソフト「Suzuka」などがありますhttp://www.cty-net.ne.jp/~uzgensho/）






---------------------------------------------------------------------------


▼その他▼


■素材系
･GIMP（http://gimp-win.sourceforge.net/stable.html）
言わずと知れた、フリー版フォトショップともいえるソフトです。
フォトショップなどのUIになれた人にはちょっと、入り込みにくいかもしれませんが、
これだけ高機能なソフトがフリーというのは、世の中イカれているとしか言い様がありません！
南無！
Mac版、win版共にあり！

･InkScape （http://inkscape.org/index.php?lang=ja）
GIMPがフリー版フォトショップなら、
InkScapeはフリー版イラストレーターともいえるソフトです！
イラレに比べてベジェが若干扱いづらい点があるかもしれませんが、
慣れれば何も問題ありません！
こんな高機能なソフ（ry
南無！
Mac版、win版共にあり！

・IETester（http://www.my-debugbar.com/wiki/IETester/HomePage）
今だにIE6～7を使っている利用者の割合は高いです。
だけども、win7に入っているブラウザはIE8・・・これでは動作確認ができない！
って時に重宝するであろう、IEシミュレーターです。
これを使っていろんなサイトのレイアウトの崩れ具合を楽しむのもありかもしれません。
やっぱないかもしれません。




---------------------------------------------------------------------------


正直これだけタダでソフトが揃えられることを最初に知っていたら、
 たぶん何もソフト買わなかったんじゃないかってぐらいのものばかりです。
開発者に感謝！

【日常】パソコン

初めて買ったパソコンはIBMアプティバ。


X68000とかMSXとかなぜか憧れてまして。


世代違うのになぁー

あの時代のパソコンは妙なオーラがあった気がする。


それと、パソコンやる＝プログラムやる　みたいな雰囲気があったかもしれない。




ハードオフとかのジャンク品につまれた昔のパソコンが宝物に見えました。
DX-7とかのシンセサイザーも。



デザインも角ばっててカッコよかったなぁー。





なんだかなつい！

【日常】寒い

寒い。

暖房つけると乾燥する。

どうすりゃええねん。

【css3】ie6/ie7/ie8でcss3を実現するPIE

今回ご紹介するのはなんと、ie6/ie7/ie8でcss3の（一部）サーポートを行えるという
超兵器のようなhtcファイル（中身はjavaScript）です！



■使い方-------------------------------

▼PIE site
http://css3pie.com/



①上記のPIEのサイト右の「Download」をクリックするとファイルをダウンロードできるので、
解凍してできたフォルダを適当名前（pieなど）にする。

②その後、自分のサーバにフォルダごとアップロード

③スタイルシートにてcss3のコードを記述

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 30px;
-moz-box-shadow: #666 0px 2px 30px;
box-shadow: #666 0px 2px 30px;
behavior: url(pie/PIE.htc);


ここでポイントとなるのが最後の行
「behavior: url(pie/PIE.htc);」です。

この「behavior」というプロパティですが
こちらはIE独自のものらしく、IEのみにファイルを読み込ませることができるらしいです。
ここで先ほどダウンロードしたPIE.htcを読み込んでいます。

ファイルのパスも特殊で、cssからの相対パスではなく、
このcssを読み込んでいるhtmlからの相対パスを記述する必要があります。 

 ようするに今回の場合はhtmlファイルとpieフォルダが同階層ということになります。



PIEの使い方は以上です。
PIEのサイトの方にcss3のジェネレーター（？）がありますので、
そのコードを貼り付けるだけで、ie6以降の全てのブラウザで角丸やドロップシャドウが実現できる・・・！

いい時代になったもんやで。



ちなみにこのサイトのトップページでテスト的に実装しています。

■注意-------------------------------

 ひとつ残念なのは、相変わらずオペラではグラデーションがサポートされておらず、
このPIEを使用してもグラデーションを描画することができないことです！


オペラめ・・・



それから最後に、
サーバによってはhtcファイルをデフォルトでは扱えない場合があるようで
その場合はhtcファイルと同じディレクトリに「.htaccess」をおいてあげる必要があります。

.htaccessの中身に
「AddType text/x-component .htc」
を記述してあげる。



▼参考サイト
htcが効かないサーバの場合

【Flash】シューティングゲーム的な

Flashはこちら


シューティングゲーム的なものを作り始めました。テキトーについこのあいだから。


画像がちょっとつくだけでもかなり雰囲気が変わり、「ゲームってのはグラフィックも大切なんやな～」
とか思いました。


もっと音楽とか敵キャラとかガッツリ作りたいんですが、いかんせん平日は時間がありません


時間くれ！！！！




「時間ないとか言っちゃう人は、それ言い訳だから～」
って誰かが言ってましたね。知りません。

【Flash】TwitterとBox2Dの連携

Flashはこちら


Twitterから文字列を検索し、
その文字列を含むつぶやきを行ったユーザーのアイコンの画像を、
Box2Dのオブジェクトに反映する・・・・
というFlashを制作しました。

どうやら、TwitterAPIの仕様変更でFlashから直にTwitterのアイコン画像を
読み込むことができなくなったようで、PHPを途中にかませて画像を生成・・・
それをFlashが読み込んでいます。

▼FlashからTwitterのアイコン画像のURLをPOSTし、画像を生成するPHPプログラム。

$url = $_POST["url"];
 header("content-type: image/jpg");
$image = imagecreatefromjpeg($url);
imagejpeg($image);
  imagedestroy($image);   


以上、説明が全然たりない解説でした。
詳しい解説は、また・・・明日！

お絵かき掲示板BBSNoteを設置する。

自分のホームページ用にＰＢＢＳ（お絵かき掲示板）を設置方法を調べたんですけど、これがなかなかに難しかったのでメモ。

今回つかわせていただいたＰＢＢＳは「BBSNote V8 b版」設置方法もホームページに丁寧に書いてあり、大変ありがたかったです。

cgiファイルに書かれているＰｅｒｌのパスを以下のように設定。（これはサーバーによって設定が異なるようです）

#! /usr/bin/perl



サーバーにアップロードする際にFFFTPのオプション→環境設定→転送モードで、

拡張子txtやcgi、html等ははアスキーモードでアップロード。その他の画像やjar、zipファイルはバイナリモードでアップロードしました。

その後、コマンド→属性の変更でパーミッションの設定を行う。今回は公式ページのマニュアルのアップロードページに書かれている「パーミッションの設定」通りに設定しました。



それから現在レンタルしているサーバーが、cgiのディレクトリとhtmlを格納するディレクトリが別れているタイプでそれだと若干設定がめんどうなので、htmlファイルとcgiファイルをまとめるために、htmlをおくディレクトリに以下を書き込んだ「.htaccess」ファイルを置く必要がありました。

Options +ExecCGI
AddHandler cgi-script .cgi
AddHandler cgi-script .pl



この.htaccessファイルなんですが、デスクトップ上でhtaccess.txtというテキストファイルを作りそれをサーバーにアップロードした後名前を、「.htaccess」書き換えてあげる必要があります。以上で設定は終わりです。





今までＡｃｔｉｏｎＳｃｒｉｐｔやＪａｖａＳｃｒｉｐｔは触ったことがありましたが、cgiは触ったことがなかったので、勉強になりました。やっぱりこれだけでお絵かき掲示板を自分のサイトに作れるのは大変便利ですよね！