開発日誌: 【UE4】セルっぽいルックを頑張ってみる その４（エッジ）
2015年4月3日金曜日 【UE4】セルっぽいルックを頑張ってみる その４（エッジ） エッジについてです 【最終ルック】 上の画像は左のキャラとそれ以外の部分で、2通りのエッジの付け方を使っています。 キャラの方は、モデリングの段階でポリゴンを法線方向に拡大し、面を反転してエッジとしています（バックフェース法というらしいです）。 この方法の特徴としては、 モデリング時にリアルタイムで調整ができる ポストプロセスが不要なのでモバイル/HTML5環境でも使える 実装が簡単 輪郭の表現はできるが、凹凸部分の表現ができない カメラとの距離によって画面上の線の太さが変わる メッシュの交差時に表示が不自然になる場合がある 頂点数が2倍近くになってしまう それ以外の部分はポストプロセスを使い、オブジェクトの深度を表すデプス値と面の向きを表すノーマル（法線）の値を参考にエッジの検出を行っています。
Edge Animateでスワイプを実装してみた |
Edge Animateでtouchendやtouchstartが使えるのでスマートフォンのスワイプ動作を実装してみました。 ※執筆時点ではv1.0.1のバージョンでご紹介します。 サンプル 今回はソースを見えるようにするためパブリッシュをしてない素のデータとなります。 左右にスワイプすると脇から灰色の矩形が通り過ぎます（ややわかりにくい＾＾； →別ページで開く PCでのタッチイベント検証でChromeのデベロッパーツールのTouch Event Emulateが便利 この制作をするなかでPCでmouseup/mousedownしかとれずタッチイベントは基本的に検知できませんでした。ですので、当初はスマートフォンで出来上がったEdge AnimateのURLを何度見てテストしたので大変でした。 そんな時に、PCでのタッチイベント検証でChromeのデベロッパーツールのTouch Event
Edge Animate 1.5が出たので生成ファイルを1.0.1と比較してみた。 |
つい先日ですが、Edge Animate 1.5がリリースされました。 自分は、無償でここまで使えるアドビのWeb制作ツール for デブサミ2013 – SSSSLIDEのスライドを眺めていて、あれ？？1.5って書いてあるって思って調べたら気づいた次第。 開発ブログにも書いてありました。→Adobe Edge Animate 1.5 is here, bringing new design capabilities to the web « Adobe Edge Animate Team Blog というわけで、最近使い込み始めているので、Edge Animate 1.0.1と1.5の生成ファイルを比較してみました。 今回のテストでは、ファイル比較のみで、再生パフォーマンス、アプリケーションのUIの変化、追加機能については言及しないのでご注意ください。 既存プロジェクトを1.5版プロジェ
押井守監督作品「ちまみれマイ・らぶ」HTML5 アニメーションを活用した iPad 向け電子出版 | Adobe HTML & Flash Gallery
押井守監督の電子書籍の初監督となった「ちまみれマイ・らぶ」は、セルアニメでもない、マンガでもない、タブレットデバイスに最適な演出を追求してコミックアニメーション社が制作したコンテンツです。特に、色の表現力の高さは、他の媒体では体験できないレベルを目指しました。 押井守監督原作のコミックアニメーション「ちまみれマイ・らぶ」 ©2013 八八粍・デイズ／コミック・アニメーション 企画／背景 「ちまみれマイ・らぶ」は、押井守監督の指揮の元、iPad を前提としたコンテンツとして制作されました。押井監督の「紙媒体のコンテンツをほぼそのままモニタ上に持ってきたようなコンテンツには物足りなさを感じていた」という演出家としてのこだわりと、現時点における iPad のデバイスとしての性能とのバランスを取る中で、新しい表現の形が生まれました。その一番の特徴は、色彩豊かなイラスト一枚一枚の魅力を前面に、そこに
Edge Animateで作成するHTML5サイトのサンプル | ClockMaker Blog
随分前に作成したものですが、Edge Animateを使ったウェブサイトサンプルを作ったので紹介します。Edge Animateとは2012年9月にリリースされたアドビのHTML5向けのアニメーション制作ツールです(参考記事)。アニメーションを作るためのタイムラインを持っており、JavaScriptなどを併用してインタラクティブコンテンツを作ることのできます。ユーザーコミュニティーが盛り上がればいいなぁということでソースファイルも配布しておきます。 サンプル ソースファイル一式 Edge Animateの特徴 インタラクティブコンテンツを作るには課題の多いHTML5ですが、Edge Animateは初級者でも使いやすいように至れりつくせりの機能がついています。特徴的な機能としては次の通り。 アニメーションは内部的にjQueryアニメーションとして変換されている 既存のHTML製ウェブサイト
Shibu's Diary: Adobe Edge Animate 1.0を試してみた
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 HTML5は、HTML5という名前のくせに98%ほどはJavaScriptという、詐欺っぽい名前でありながら一世を風靡したとおもいきや、FacebookのCEOの発言で一悶着あったりと、まだまだいろいろな話題を提供し続けてくれています。個人的にはGPUサポートやスマートフォンの高速化などがこなれてくれば、さまざまな用途で活用できるようになるだろうな、と思っています。HTMLのレイアウトがGPGPUとかで行われるようになれば、CPUでレイアウトを処理している今時のGUIツールキットよりも高速に動くようになる時代が来てもおかしくないですしね。今はまだまだHTML 5に投資し続ける時ですよ！バカ発見器のTwitterのTLになんとなく踊らされた人たちが寝転んでいる今がチャンスです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery 3D rotation with Adobe Edge and Greensock – it’s alive!
WordPress › Error
UDK | DevelopmentKitGemsSobelEdgeDetectionJP