誇張とシンプル。デフォルメについての話

2014年4月28日 11:16

デフォルメキャラって作ったりします？

こんにちは、ゲーム事業部デザイナーのみねおです。
最近は「姫騎士と最後の百竜戦争」チームで
ある時はUI、ある時はキャラクターなど、いろいろごにょごにょ作ってます。

今回はスマホアプリでは良く使われるデフォルメされた動物やキャラクターを作る際に、
自分が考えたりすることなんかを書きます。

イラストが際立つ！反射光のコツ

2014年3月29日 18:13

このイラスト......もうちょっと立体的にしてもらえませんか？

(> Д < )　「......ぐふっ。つっこまれた。ど、どうしよう。」

このキャラ......立体感足りないです

(；v；)「......うっ、うっ。光源は意識して描いたのにナゼ！」

そんな風にお悩みのあなた！その絵も ひと筆で立体的にできるんです！

そう、反射光！！！

反射光で絵の見栄えが変わるビフォーアフターは続きからどうぞ！

人がハマるには訳がある！3つのテクニック紹介します。

2014年3月20日 13:45

「計算通り…」人がハマるには仕掛けがあるの巻

こんにちは、デザイナーのみそです。
突然ですが！自分の作ったもので誰かを夢中にさせているでしょうか？
もし、狙ったとおりに人を夢中にさせることが出来たら、素晴らしいですよね!

今回は「人を夢中にさせる仕掛けの話」を
現在リリース中の弊社ゲーム
『姫騎士と最後の百竜戦争』（姫ヒャク）の1シーンを例にご紹介したいと思います。

姫騎士と最後の百竜戦争

※今回の記事は、サイトウアキヒロ氏のゲームニクス理論を大いに参考にしております。
本記事でご興味をもたれたら是非、書籍などを読んでみてください。

あなたの声でクルマが走る！世界初のカーレースイベントが開催されました！

2012年11月30日 19:01

こんにちは、クライアントワークチーム、ディレクターのふかっちです。

今回は、カヤックが実施したイベントのご紹介です。

VOICE DRIVER CUP ~世界初！声でクルマが走るカーレース！~

「VOICE DRIVER」は、「モータースポーツのワクワク感を、すべての人に」をコンセプトにした、声でクルマを運転する世界初のモータースポーツ。カヤックは、プロジェクトチームの一員として、Webサイトの制作はもちろん、声で走るクルマのシステムづくりから塗装にいたるまで、さらにはコースづくりにも関わりました。

声で走るクルマの仕組みとしては、iPhoneのマイクに向かって声を出すと、それを感知したクルマ「日産フェアレディZ」のアクセルが発動し、全長60mのコースを疾走。声の大きさに応じてスピードが変わり、他レーンを走る参加者と競い合うことができるという内容です！

話題を集めたメイキングやイベント模様の動画は続きから！

UFOを操ろう！ HTML5+JavaScriptで実装するスマホコントローラーの仕組み。

2012年4月25日 13:52

HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート！

HTMLファイ部ほんだです。

カヤックの新規開発事業部「ブッコミジャパン」が、
HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました！

jsdo.it（弊社運営のHTML5コード共有サイト）からHTML5ゲームを簡単に投稿でき、
他のクリエイターによって投稿されたゲームを無料で遊べます！

また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる
JavaScriptライブラリ「jsdoitController.js」もリリースしました。

今回は「jsdoitController.js」で使えるようになる
「jsdo.it WebSocket Controller」（以下：jsdo.it コントローラー）の
仕組みについてお話ししたいと思います！

光から移動まで、すべてCSSで作る光るアニメーション

2011年12月 7日 16:58

光から移動まで、すべてCSSで作る光るアニメーション

ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」

意匠部ME課あらため、HTMLファイ部所属となった比留間です。

今回は、先日リリースした「アーバンリサーチ」のキャンペーンで
「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。

簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。
内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、
というとてもシンプルなゲーム型キャンペーンサイトになっています。
さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。

さて、今回この記事でご紹介したいのは、
このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を
簡単に説明したいと思います。

これを追加したことによって、だいぶ雰囲気が出ました。（アーバンリサーチのゲームページで雰囲気を確認）
HTMLファイ部ということで、HTML5関連技術であるCSS3をメインに使用したものとなっています。
jsdo.itにもサンプルコードが載っているので、自分で色々といじってみたい方は以下のサンプルコードをForkしてみてください。

ホタルっぽい雰囲気の演出をCSSだけで作る - jsdo.it - share JavaScript, HTML5 and CSS

ホタル風オブジェクトのベースを作る

ということで、早速作り方に入って行きます。
まず、ホタル風オブジェクトのベースとなるオブジェクトを作ります。
今回のサンプルではdiv要素ひとつに、CSS3で色々とスタイルを当てていきます。

実際に使ったコードは以下。

	.fireflyDot {
        width: 4px;
        height: 4px;
        background-color: rgba(255, 241, 202, 0.8);
        border-radius: 2px;
        box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
    }

見てもらうとわかりますが、数種類のプロパティだけで実現しているのがわかります。
これを適用したものが↓

ベンダープレフィクス（-webkitとか）とCSS3の細かな説明は省きますが、widthとheightでサイズを、border-radiusで丸みを、そしてbox-shadowでふんわり光る光彩を演出しています。

実際のホタル風オブジェクトの生成などについてはJavaScriptで対応していますが、サイズや光加減などをすべてCSSで実現しているので、サイズや色味を自由に変更できるのが強みです。

ホタル風オブジェクトを動かす

上記のCSSを適用することでホタル風オブジェクトが表現できました。
しかし、ただ配置しただけではただのぼやけた丸ですね。
なので動きを加えてみましょう。
そしてその動きの部分もCSSで対応します。

使用している主なプロパティは以下。

	opacity: 0;
        transition-property: transform, opacity;
        transition-duration: 2.5s;
        transition-timing-function: ease-out;

これだけです。
動きの実装で重要なのはtransitionプロパティだけ、ということになります。（移動の際の位置指定はJavaScript側で自動生成しているため）
このtransitionプロパティ、設定しておくとtransition-propertyプロパティで指定したプロパティの値（サンプルではtransform、opacity）に変化があった際、トランジション（遷移）を伴って変化を表現する、というものです。

つまり、サンプルで指定している「transform」と「opacity」の変化を監視させることで、その値が変更された際に、それをアニメーションで表示する、というものになります。
そしてJavaScriptで移動後の位置を動的に決定し、それを指定してあげれば、あとはCSSが勝手にアニメーションをつけてくれる、というわけです。
これだけで、移動と同時に透明度も1→0と変化するためホタルが光ってふんわりと消えながら移動する、というような演出が完成します。

もちろん、こうした処理はCSS3のtransitionやtransformに対応していないと動作しませんが、jQueryを使えばこれと似たような処理を実現することは可能です。（animateメソッド）

iPhone / Android対応

今回の実装のいいところとしては、CSSで表現しているためスマートフォンでも表示可能なこと、とりわけiPhone/iPadではとてもスムーズにアニメーションが実行される点です。

Mobile Safariでは、指定方法によってはCSSによるアニメーションはGPUを利用してレンダリングされるためPCと同じようになめらかに表示される、という特性があります。

もしスマートフォンをお持ちの方は、ぜひキャンペーンサイトをスマートフォンでも見てみてください。
PCとほぼ同じ感じで表示されるのが分かるかと思います。
もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。

ぐったりくまリオネット@WHY DON'T YOU PINK?展

2011年6月 3日 22:45

コンニチワ私も東京女子 aoizmです。
このたび、6.3(fri)-6.26(sun)に開催される東京女子プロジェクト「WHY DON'T YOU PINK?」展にかわゆいインタラクティブコンテンツを出展しました。

東京女子プロジェクトは東京でがんばる女子による、東京でがんばる女子のための、シアワセ開発プロジェクト。
KAYACでもWEBサイト制作をお手伝いしたりしています。

東京女子プロジェクト

【新卒採用コンテンツ】"3x9=さんきゅう 27人のありがとう"公開しました！

2010年10月22日 15:46

2012年度の新卒採用コンテンツは”ありがとう”がテーマ

こんにちは。スライスを知らないまま新卒で入社してから
はや５年、ニシです。

弊社は”ありがとう”をテーマとしたTHANKSというサービスを運用しており、
社内文化としても”ありがとう”を非常に大切にしております。

そんな”ありがとう”を少しでも体験していただけるよう
今年は”ありがとう”をテーマとした新卒採用コンテンツを制作いたしました！