Goku Blog http://goku.game-waza.net/ ゲーム会社勤務のUIデザイナーのブログ。 独自の視点からUIの分析、ゲームについて感じた事を書きます。 ja 2011-03-01T16:16:07+09:00 http://goku.game-waza.net/aftereffects/%E3%80%90ae%E3%80%91keylight%E3%81%AE%E8%B5%B7%E8%A8%B4%E3%80%82%E3%82%B0%E3%83%AA%E3%83%BC%E3%83%B3bg%E9%99%A4%E5%8E%BB%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB 【AE】KEYLIGHTの起訴。グリーンBG除去のチュートリアル AE上で、KeyLightを使用してグリーンバックで撮影された人物だけを切り抜く方法。 そのチュートリアル。 http://library.creativecow.net/articles/kramer_andrew/colorkey.php... そのチュートリアル。

title_banner.jpg

http://library.creativecow.net/articles/kramer_andrew/colorkey.php
]]> AfterEffects 2011-03-01T16:13:45+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/%E7%84%A1%E6%96%99%E7%B4%A0%E6%9D%90%E3%82%B5%E3%82%A4%E3%83%88/sozaiya.com sozaiya.com フリー素材を提供してくれるサイトです。 一部有料があるのでしっかり見て落としましょう。 自然物でフリーな物はかなり使えます。 http://sozaiya.com/index.php... 一部有料があるのでしっかり見て落としましょう。

自然物でフリーな物はかなり使えます。

texture002.jpg
http://sozaiya.com/index.php
]]> 無料素材サイト 2011-01-27T13:44:52+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3/%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3 タイポグラフィ  タイポグラフィの動画です。 かなり良く出来ています。参考になる事が多いです。 こういうの一度はチャレンジしたいですね。 ... かなり良く出来ています。参考になる事が多いです。

こういうの一度はチャレンジしたいですね。


]]> タイポグラフィ 2011-01-27T13:43:39+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/3dcg%E6%8A%80%E8%A1%93/%E3%80%90camera%20mapping%E3%80%91%E3%82%AB%E3%83%A1%E3%83%A9%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB 【Camera Mapping】カメラマップのチュートリアル  カメラマッピングのチュートリアル動画。  英語ですが、基礎的な事を紹介しています。 Camera Mapping Tutorial from Andrew Price on Vimeo....  英語ですが、基礎的な事を紹介しています。

Camera Mapping Tutorial from Andrew Price on Vimeo.

]]> 3DCG技術 2011-01-27T13:38:57+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/vfx%E3%80%81cg%E3%80%81music/%E7%B4%99%E5%85%8E%E3%83%AD%E3%83%9A 紙兎ロペ こういうFLAHアニメ作ってみたいなーと考え中  
 ]]> VFX、CG、MUSIC 2011-01-24T12:41:33+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/%E3%82%B2%E3%83%BC%E3%83%A0/%E3%80%90ds%E3%80%91%E9%80%86%E8%BB%A2%E8%A3%81%E5%88%A4%EF%BC%92%E3%80%80pv 【DS】逆転裁判２　PV CMのカットインは見せ方が良い出来です。 カプコンのタイトル表示は毎回綺麗で好きです。 ... カプコンのタイトル表示は毎回綺麗で好きです。




]]> ゲーム 2011-01-21T20:55:08+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/vfx%E3%80%81cg%E3%80%81music/%E3%80%90%E6%98%A0%E7%94%BB%E3%80%91%E3%83%AD%E3%83%93%E3%83%B3%E3%83%BB%E3%83%95%E3%83%83%E3%83%88%E3%81%AEvfx 【映画】ロビン・フットのVFX  舞台となった12世紀末のイングランドの再現VFX。 海岸のねつ造の仕方はかなり大胆ですごいです。 ネタバレを含みますので、観る方はご注意を。 ... 海岸のねつ造の仕方はかなり大胆ですごいです。

ネタバレを含みますので、観る方はご注意を。
]]> VFX、CG、MUSIC 2011-01-20T13:40:04+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/vfx%E3%80%81cg%E3%80%81music/%E6%98%A0%E7%94%BB%E3%80%8C%E3%83%AD%E3%83%93%E3%83%B3%E3%83%BB%E3%83%95%E3%83%83%E3%83%88%E3%80%8D%E3%81%AE%E5%8A%B9%E6%9E%9C%E9%9F%B3%E5%88%B6%E4%BD%9C 映画「ロビン・フット」の効果音制作 映画の殆どの効果音は、Foley Artistによって制作された物だそうです。 ロビン・フッドの効果音を手掛けた、Gary Heckerさんの制作動画です。 馬や吹雪など口で出している効果音もあります。 SoundWorks Collection: Gary Hecker, Vet... ロビン・フッドの効果音を手掛けた、Gary Heckerさんの制作動画です。
馬や吹雪など口で出している効果音もあります。

SoundWorks Collection: Gary Hecker, Veteran Foley Artist from Michael Coleman on Vimeo.

]]> VFX、CG、MUSIC 2011-01-20T13:09:42+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/web%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9/web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E3%83%92%E3%83%B3%E3%83%88%E3%82%92%E5%BE%97%E3%82%8B WEBサイトからヒントを得る 最近のWEBサイトはFLASHで構成されているものはほとんどで、その中にはゲームで使えそうなヒントがたくさんあります。 UIのまとめに困ったり、新しいアイディアはゲームだけじゃなくWEBを見てみるのもいいと思います。 個人的にはゲームより、WEBサイトから学ぶ方が多いかもしれませんね。 H... UIのまとめに困ったり、新しいアイディアはゲームだけじゃなくWEBを見てみるのもいいと思います。
個人的にはゲームより、WEBサイトから学ぶ方が多いかもしれませんね。

HTMLにはない、FLASHの特徴としてスプリクトで動くアニメーションも凝ったものが多いのでゲーム中でのUIアニメーションの参考にもなりますよ。



今回は、いくつか載せておきます。
ネットサーフィンをしていて気になったページはSSを保存したり、ブックマークしておくといいですよ。




どちらかというとマットな感じ。
フォントの大きさや、タブの管理が見やすいので重要視しなければならない項目が分かりやすい。
シンプルながらデザインのポイントを抑えているまとまりのある見やすいサイトです。




ゲームっぽいサイト。これだけ見るとゲーム内画面のようですね。
ゲーム用にするにはカーソルが必要ですが、WEBならではのレイアウト。カッコイイです。



情報量が多いですけどエリアごとに分かれているので見やすいです。
応用が利く作り。



アールが多いデザイン。見た目はポップなウィンドウになります。
しかし、全体的に色の彩度を低くしているのでシックなイメージにも取れます。



こんな感じでWEBデザインでもゲームで生かせそうなものがたくさんあります。
UIのアイディアで困った時は休憩がてらネットサーフィンをして他のサイトを覗いてみるのもいいかもしれませんね。
]]> WEBインターフェース 2010-04-02T14:26:56+09:00 NPEE NINJA BLOG NPEE http://goku.game-waza.net/%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9/%E3%83%99%E3%83%A8%E3%83%8D%E3%83%83%E3%82%BF%E3%81%AEui%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 ベヨネッタのUIについて 公式ブログには担当さんからUIについて語っていました。 魔法と爽快感を考えてデザインしたみたいです。 ■ロゴ 縁取りが独特ですね。 外側の枠が上側では赤で縁取りしているのに、下では白が外枠になっています。 最背面の赤のドロップシャドウがなぜか下側だけない。 パッケージ版は... 魔法と爽快感を考えてデザインしたみたいです。

■ロゴ


縁取りが独特ですね。
外側の枠が上側では赤で縁取りしているのに、下では白が外枠になっています。
最背面の赤のドロップシャドウがなぜか下側だけない。
パッケージ版は、赤のドロップシャドウなし。ルビがない時もある。
大きめの画像で観るとテクスチャ、レイヤ効果、線幅など細かい粗がちょっと目立つかも・・・。


■基本画面


通常の戦闘画面。
基本は、ライフゲージ、スコア系の表示です。





ライフゲージ。
ブログを見る限りでは、結構苦労したようです。
同じUIデザイナーとしてこういうの観るとすごく分かる。



ライフゲージのフォルムにステンドグラスを合わせたデザインですね。
アイコンも同じくステンドグラス風。
ベースを置いてない文字にはドロップシャドウがかなりキツメに入れてあります。
数字や文字は枠を入れたり入れなかったり、文字の大きさそれぞれと、不揃い感がかなり出てる気がします。
特に、Combo Pointsは観づらい感じ。

■メニュー画面


雰囲気がかなりいいです。
暗めかつ、武器の部分にのみ色が入ってるのですぐに目視できます。
ただ、プレイするとちょっと戸惑いました。
これが入るの？入ってるの？カーソルどこよ？など。
カーソルが同じ土台+同系色ということでちょっと戸惑うかもしれません。




雰囲気は世界観にマッチしていて好きです。
こういう世界観のインターフェースは難しそうな感じをうけました。


*ベヨネッタ　公式HP
bayonetta.jp/main.html

]]> ゲームインターフェース 2010-03-29T14:21:55+09:00 NPEE NINJA BLOG NPEE