【UE4】アニメーションモンタージュを再生するキャラクターAIの作成 - Qiita
This article is a Private article. Only a writer and users who know the URL can access it. Please change open range to public in publish setting if you want to share this article with other users. オブジェクトの範囲内に入ると既定のアクション（椅子に座る、ベッドに寝るなど）を行うキャラクターAIを作成します。 指定されたターゲットポイントを巡回するAIはすでにできているので、それに追加する形で作成します。 【今から作るもの】 ・キャラクター。何かがオーバーラップしたらタグが付いているか検知する関数を持つ。 ・椅子。再生するアニメーションやアニメーションの再生時間、キャラクターの位置を合わせるための
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
初心者による超初心者のためのPixiJS入門 - Qiita
この記事はGitHubに掲載した記事 https://github.com/wowowo142/c96 の転載となります。 記事更新情報(全部読んでからまた来た人向け) (2022/04/20) Spriteの元となる画像ファイルなど、リソースの読み込みに関してすごく分かりやすく詳細に解説されている記事がありました。 ローダー(PIXI.Loader)の使い方は筆者の能力と気力不足により本記事では解説できなかったので、 Pixiをちゃんと使いたい方はぜひ読みましょう。超オススメ。 PixiJS の Sprite 調べてみた (2020/12/14) 公式以外で自分より前に似たようなチュートリアルを書かれている方がいました。v4.5.5準拠ですが、ゲームの作り方まで踏み込んだ解説をされていたのでリンクを貼っておきます(英語)。 GitHub - kittykatattack/learning
はじめてのPixiJS 😇 - みかづきブログ その3
いままで2DのものをつくるときはCanvasのAPIを直接叩いていたんですが、 ふと、ライブラリをつかってみようとおもいPixi.jsを試してみることにしました。 ドキュメント に目を通しながら探り探り書いたコードをメモしておきます。 JavaScript // tickerをつくる const ticker = new PIXI.ticker.Ticker(); // rendererをつくる（WebGLがつかえたらWebGLをつかう） const renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); // stageをつくる const stage = new PIXI.Container(); // 真っ赤なtextureをつくる const texture = new PIXI.
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
日本アニメは世界の潮流から外れている 片渕須直監督が本気で心配する、その将来：朝日新聞GLOBE＋
【関連記事】世界で急成長の日本アニメ、海外勢が猛追 輝き続けるカギは？ 片渕監督の眼 【関連記事】なぜ日本アニメは世界で愛される ディズニーとは対極の「ガラパゴスの力」 ――日本のアニメには、見ている人が自分自身の人生と重ねて入り込める、共有できるストーリーが多いと、海外のアニメファンの多くが言っていた。だからこそ、国籍に関係なく、様々な国で受け入れられるのではないでしょうか。 えっとね、違うかもしれないんだけども、ある意味、日本のアニメーションがティーンエージャーより上の世代に向けて特化していった、対象年齢を特化していった結果だと思うんですよ。例えば、ピクサーなどはまだ子供のために見せるという使命が残っていますよね。日本はもうないですよ。 それはね、逆に言うと、そこが穴場なんです。「我々の世代に向けて語ってくれるメディアってない」と、ティーンエージャーや20代前半の人が思うわけです。とこ
【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選
【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選 初心者向けにCSSで書けるアニメーションをまとめたサイトや記事を厳選して紹介しています。Webサイトの制作において重要なアニメーションですが、すぐ使えるサンプルをまとめているので、ぜひ参考にしてみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSのアニメーションをまとめたサイトや記事を紹介します。 サイトを作っていく上でアニメーションの実装は必須と
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
Unity でスプライトアニメーションを作る - Qiita
Unityでスプライトアニメーションを作る際の手順をまとめました。 [アニメーションシートを作る] ・ アニメーションさせる絵を縦横同じサイズのマスに並べたpngを用意する ２パターン以上のアニメーションパターンを使用する場合は左上〜右下にパターンが流れるように配置します ・ Project>画像をクリック ・ InspectorでTextureTypeをSprite,SpriteModeをMultipleに変更 ・ Inspector一番下のApplyをクリックして変更を反映 ・ Inspector真ん中あたりのSpriteEditorボタンをクリック ・ SpriteEditorウインドウが現れるのでSlice>TypeをGridByCellSizeにする ・ 分割サイズをアニメーションの１フレーム分のサイズに設定（128x128の画像を並べる、など） ・ Pivotは回転させたりする
Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
Spineを使って２Dキャラクターを３Dのように動かす | Nagisaのすゝめ
初めまして。グラフィックデザイナーのにしやまです！ 今日はSpineというアニメーションツールを使って、2Dキャラクターを3Dっぽく動かす工程とポイントを簡単にご紹介します。 Spineとは Spineとは2Dアニメーションを作成するためのツールです。 ボーンを入れて動かしたり、画像を複雑に変形できたりするので、比較的少ない枚数のイラストから高度なアニメーションを制作することができます。 公式サイト : Spine: ゲーム用 2D アニメーション ソフトウェア 【１】絵を準備する まずは何といっても動かす元の絵が必要ですね。 この段階で、そのキャラクターがどのような動きになるのかほぼ決まってしまうのでしっかり考えてアイデアを絞り出します。 そして今回出来上がったのがこちら。 （Photoshopで描いています） 魔法が苦手すぎて科学も駆使しちゃう魔女っ娘です。 相棒の猫型ハコロボットと花
「いらすとや」を本気でSpineアニメーションさせてみた | Nagisaのすゝめ
そうだ！いらすとやを動かそう！！ こんにちは。にしやまです。 突然ですが、皆さんは「いらすとや」をご存知でしょうか？ 某大型家電量販店の店内ポスターに使用されていたり、SNSで拡散されたり、目にする機会が多いのでご存知の方も多いかと思います。 可愛いイラストのフリー素材サイトなんですが、中には「こんなのいつ使うんだろう」っていうようなネタ画像もあって見てまわるだけでも面白いです。 こんなのとか。 こんなのまで。 ある日のことです。 いつものように「いらすとや」を巡回していたぼくはふと思いました。 この愛すべきゆるキャラ(？)たちがイキイキと動いているところを見てみたい！それも超ヌルヌルに！！…と。 というわけで、今回はSpineを使って「いらすとや」をヌルヌルと動かしていきます！ ※Spineについては前回の記事「Spineを使って２Dキャラクターを３Dのように動かす」を参照ください。 ま
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
Animate Curtains Opening with jQuery « Build Internet
Step 1 – What You’ll Need This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them. Secondly, in addition to the standard jQuery file, we are also using the easing plugin. We have worked with this plugin i
Let's get animating! | GSAP | Docs & Learning
Welcome! In this article we're going to cover GSAP's core fundamentals and animate some HTML elements. 🥳 If that's not your end goal, don't worry. Whatever you plan to animate, whichever framework you use - the techniques and principles covered here will serve you well. The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including a ton
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Unreal Engine で UMG ウィジェットをアニメートする
PixiJS API Documentation
PixiJS API Documentation
タッチパネル対応 - Unity
http://www.dprog.info/javascript/tweenmax/