Live2Dモデルはとにかく腰を動かせ！｜納内れお
Live2Dユーザーのみなさん、「全身可動モデル」作ってますか？ Live2Dで人物を動かすのに慣れてくると、だんだんと全身を動かしたり可動範囲を広くしたくなってきますよね。この記事ではそんなLive2D中級者さんのための「より人間っぽい動き」を作るためのコツのひとつをお伝えします。 ちなみに今回はフェイストラッキングで操作するタイプのLive2Dモデルを題材としてお話していきますが、大部分はLive2D特有の知識ではなく立ちポーズの人物にモーションを付ける際に常に共通する考え方となっています。 高可動モデルにありがちな問題点 さて、ここにサンプルとしてある問題を抱えた高可動モデルを用意しました。いったいどんな問題なのか考えてみてください。 ん？高可動って言う割に「角度 Z」しか動いてない？ ・・・今はそんな話をしているのではありません！！ えーっと、人によって言い方は変わってくると思うの
本当に気持ちの良い動きとは？ アニメーションにおける大切な基礎｜SONICJAM
こんにちは。SONICJAMデザイナー森田です。 みなさま、いかがお過ごしでしょうか。本日は"動き"について、アニメーションの基礎をお話ししていこうと思います。 昨年、オープンソースライブラリ『Bodymovin』の登場でWebアニメーション表現の自由度が増したこともあり、AfterEffectsに手をつけ始めたデザイナーの方も多いはず。 実際に弊社でも、Bodymovinを使った案件事例が増えてきています。 アニメーションは、デザイナーであっても避けては通れない領域になりつつあります。 しかし、なんとなくAfterEffectsの操作を覚えても、なかなか自然な動きをつけることが難しいと感じる人も多いのではないでしょうか？ そこで今回は『脱！カクカクアニメーション』 自然な動きをつけることにおいての重要な基礎をご紹介します。 MENU Step1.ものが動くときには、必ず伸縮運動が起きる！
UIデザイナーが演出の勉強を始める時の流れ
近年スマホアプリのデザイナーに求められるハードルが徐々に上がりはじめています。 スマホアプリのリッチ化によってゲーム内のアニメーションもリッチに動き始めて、それが普通になってきました。 しかし、デザイナーがUIアニメーションをつけるという状態はまだまだ希少な状態です。 デザイナーがUIアニメーションのスキルをつけるのはハードルが高く、UnityやAEでアニメーションを覚えたとしても、業務で任せてもらえるかわからない状態だと、中々習熟度が上がらないかと思います。 なので、多くの人は急に業務でUIアニメーションをお願いされて強制的にスキルをつけていき、スパルタで育てられた一部の人の領域だと思っています(最近は企業の教育でアニメーションを勉強しようという流れもあります) UIデザイナー自体が希少とはいえ、周りがUIアニメーションできて当たり前、という状態になってから動くよりも、今動いたほうがお得
演出を作る時の心がけ
意識していること 飽きさせない これ！ 動きは見ていて工夫させないと飽きます。 主に、同じような場面、動き、スピードが続くと退屈に感じてしまうので、少しでもその感情をなくすために様々なところに変化をつけ、見ていて飽きないようにしていきます。 飽きさせないために何をするかですが、緩急、粗密、ジャンプ率、明暗に変化を加え、印象を変えて飽きさせないようにします。 緩急でメリハリ
Spineを使って２Dキャラクターを３Dのように動かす | Nagisaのすゝめ
初めまして。グラフィックデザイナーのにしやまです！ 今日はSpineというアニメーションツールを使って、2Dキャラクターを3Dっぽく動かす工程とポイントを簡単にご紹介します。 Spineとは Spineとは2Dアニメーションを作成するためのツールです。 ボーンを入れて動かしたり、画像を複雑に変形できたりするので、比較的少ない枚数のイラストから高度なアニメーションを制作することができます。 公式サイト : Spine: ゲーム用 2D アニメーション ソフトウェア 【１】絵を準備する まずは何といっても動かす元の絵が必要ですね。 この段階で、そのキャラクターがどのような動きになるのかほぼ決まってしまうのでしっかり考えてアイデアを絞り出します。 そして今回出来上がったのがこちら。 （Photoshopで描いています） 魔法が苦手すぎて科学も駆使しちゃう魔女っ娘です。 相棒の猫型ハコロボットと花
ChromeがAPNG (Animated PNG) に対応したので作ってみた | SONICMOOV LAB
Chromeのバージョン59でAPNG (Animated PNG)が対応されたみたいなので、早速作ってみたいと思います。 目次 APNG (Animated PNG)とは？ APNGのデモ APNGのブラウザ対応状況 APNGの作り方 Adobe Animate CCでアニメーションを作成 PNGシーケンスに書き出し 「アニメ画像に変換する君」のダウンロード APNGへの書き出し設定 JSライブラリ「apng-canvas」で非対応ブラウザでも再生 APNG (Animated PNG)とは？ アニメーションをするPNGファイルで、The Animated Portable Network Graphicsの略です。アニメーションGIFのPNG版といったところですが、アニメーションGIFが256色しか扱えなのに対して、APNGは24bitのフルカラーでアルファチャンネルを扱えます。 また
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sole/tween.js: Javascript tweening engine