Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “ ゲーム “ の検索結果

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

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

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


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

続きを読む

初夏。HTMLファイ部の本多です。

夏祭りが待ちきれないあなたのために、金魚すくい顔負けのハマるゲームをご用意しました!

カヤック運営のHTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」から、
HTML5でつくられたブウラザゲームを紹介します。

※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

HTML5ゲームまとめ

JSパーティクル崩し

ブロック崩しならぬパーティクル崩し!

最初はガマン...!
数分間打ち返し続けると、フィーバータイムに突入します!

jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

続きを読む

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

光から移動まで、すべて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);
    }
    

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

ベンダープレフィクス(-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とほぼ同じ感じで表示されるのが分かるかと思います。
もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。

HTML5の可能性を示すコンテスト

ども、久々に投稿になります。ME課の比留間です。
さて、先日開催された「第0回 HTML5プログラミング&クリエイティブ コンテスト」に作品を応募してみました。

結論から先に言ってしまうと、残念ながら賞をいただくことはできませんでした。
しかし、先日開催されたデブサミ2011のブースで、HTML5関連として自分の作品を展示していただくことができました。(コンテストのリンク先では「デブサミ2011でのブース展示に使わせていただいた作品」という項目に掲載されています)

自分は当日は参加することができなかったので、どういった形で展示されたのかはわからないのですが・・。ちなみに実際に展示された作品は下にある、canvasで描かれたシューティングゲームです。(※音が鳴るので注意)

実際に展示された作品

Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

昨今のHTML5ブームで、今後ますますJavaScriptの需要と重要性は増して行くことは間違いないでしょう。
きたるHTML5時代に向けて、今からJSを学んでおくことは間違っていません。

そんな中、最近自分がはまっているサイトが「jsdo.it」です。
(まぁ弊社で運営しているサービスなので宣伝みたいですが、実際に自分のアカウントの投稿一覧を見てもらうと、かなり投稿してますw)

最近では、JS関係の質問を、コードプレビュー付きで投稿できるQ&Aコンテンツも出来たので、なかなか検索で目的の情報が見つからないときに質問してみてはどうでしょうか。
自分が作成した作品のバックアップにもなるので、これからJavaScriptを勉強しよう、という人はぜひぜひjsdo.itを使ってみてくださいね!

警告とメッセージ