「アニメーション」の記事 - Crieit

Live2D Cubism for Cocos Creatorで、ゲームに素晴らしいアニメーションを加える

2022-12-27T04:44:26+09:00

職人、アルチザンにとって、構築に使っているツールは、ゲームの良し悪しを大きく左右するものです。最高のツールを使えば、夢のようなゲームをより簡単に、より印象的に作ることができ、一行のコードを書く前に考えたことを書き留めることができます。

Cocosは、多くのゲーム会社と関係を築き、ゲームエンジンであるCocos Creatorにツールを追加し、ゲーム制作を簡素化し、よりビジョンの向上に集中できるように努力しています。

例えば、Colyseusとのコラボレーションはより良いネットワーキングのために行いましたが、Googleとの連携はより良いマネタイズをもたらしました。Huaweiとの連携により、より良いグラフィックスとより大きな流通機会がもたらされ、その他のコラボレーションにより、小規模なゲームの流通経路を獲得することができました。

今日、私達はLive2D Cubism SDK for Cocos Creatorのアルファ版をリリースしましたが、今後もサードパーティ企業へのサポートを継続します。Live2Dは2Dアニメーションの分野では、最も重要なベンチャー企業の一つです。

Live2D Inc.は、2Dアートの魅力をそのままに、イラストキャラクターをダイナミックにアニメーションさせるソフトウェア技術「Live2D」を開発する日本の企業です。Live2Dは、ゲーム、アプリ、ストリーマー、教育などの分野で幅広く利用されており、その注目度はますます高まっています。

この技術は600を超えるプロダクトに正式採用されています。ゲームの多くはアジアリリースですが、世界中にも広がっており、より大きなアニメーションコミュニティの一部となっています。

例えば、サンボーンの「ドールズフロントライン」は、アンドロイドの軍隊を指揮し、過去に発見されたエイリアンのテクノロジーによって始まった戦争を止めようとするモバイル戦略ゲームです。このゲームは、Google Playですでに100万ダウンロードを超え、4年以上にわたって運営されています。

(C) SUNBORN Network Technology Co., Ltd. (C) SUNBORN Japan Co., Ltd. https://www.live2d.jp/showcase/dolls-frontline/

このように素晴らしい製品なので、中国のゲーム開発者から、この注目すべきソフトウェアをCocos Creatorで実現できないかとの問い合わせをたくさんいただきました。Cocos2d-xは、当社の前身エンジンであり、多くの国産ゲームに採用されています。Cubism SDKを手に入れることで、多くのプラットフォームで国内外向けの新しい素晴らしいゲームを構築することができるようになります。

株式会社Live2Dとの連携により、このコラボレーションの第一弾をご紹介できることを嬉しく思います。Live2D社とは1年を通じて協業しており、今回、その第一弾をご紹介できることになりました。

発表の様子を見る

また、同社が毎年開催している「alive 2022」というカンファレンスに参加し、世界に向けて発表することができました。イベントの全容は、同社のYouTubeアカウントで公開されています。

Live2D Cubism SDK For Cocos Creator

主なハイライト

Cubismのモデルをプレハブ・ノードとしてインポート
Cubismの複数のアニメーションアクションをキャラクターに追加可能
Cocos Creatorでアニメーションの編集が可能

使用方法

Live2Dの指示に従い、SDKをCocos Creatorにインストール（READMEを参照）
Cubismのプロジェクトをエクスポートするか、すでに作成されているプロジェクトを使用する
Cocos Creatorのプロジェクトで、フォルダ全体をAssetsパネルに追加する
Assetsパネルでフォルダを開き、プレハブをノードとしてプロジェクトに追加
サイズを調整
プレハブにアニメーション・コンポーネントを追加し、'motion' フォルダにあるアニメーションを新しいコンポーネントに追加
アニメーションはアニメーションパネルから確認することができます。

重要なリンク

[SDKダウンロードページ】Live2D Cubism SDK for Cocos Creator
https://docs.live2d.com/zh-CHS/cubism-sdk-manual/download-sdk-for-cc-alpha/

[Live2D Cubism SDK]ライブ2DキュービズムSDK
https://www.live2d.com/zh-CHS/download/cubism-sdk/

[フィードバック]Live2D GitHub
https://github.com/Live2D

[SDKのインストール方法]Live2Dによるインストール手順
https://docs.live2d.com/zh-CHS/cubism-sdk-manual/top/

さらに詳しい情報

アルファ版は12月5日にCocos Creatorバージョン3.6.2で使用できるようになる予定です。Live2D Inc.とCocosの両チームは、2023年初めのベータ版リリース、同年末の最終リリースに向けて、フィードバックを求めています。

フォーラムをご覧いただき、ソフトウェアに対する感想や、ベータ版リリースに向けて改善できる点などを共有していただければと思います。

https://discuss.cocos2d-x.org/t/bring-amazing-animation-to-your-game-with-live2d-cubism-sdk-alpha-version-for-cocos-creator/57770

私たちは、Live2D Inc.がこのリリースに際して感謝し、私たちのゲームエンジンにCubismを導入してくれた彼らにお礼を言いたいです。
今回のリリースに際して、Cubismを私たちのゲームエンジンに導入するためのLive2D Inc.の取り組みとサポートに感謝いたします。
過去に素晴らしいゲームをもたらしたCubismは、今後もゲーマーに素晴らしいゲームと楽しみをもたらすと確信しています。

引用元

解説記事を「ひとコマアニメーション」に変えてみた

2021-05-03T06:16:22+09:00

いらすとやのイラストをアニメにする記事の、アニメの作り方を「ひとコマアニメーション」に変更した。みやすくなったと思う。

キャプチャ画像から解説動画の作り方

2021-04-21T15:27:01+09:00

9VAeきゅうべえ最新版 0.8.0 の機能を説明した記事をかいた。いままでは、ひとコマアニメが１ページしか作れなかったが、各ページで作れるようになり、それと連番画像の機能を組み合わせると、解説動画が簡単につくれるようになった。記事、9VAeダウンロードはこちら
https://dnjiro.hatenablog.com/entry/kaisetu

説明用GIF動画を9VAeきゅうべえで作るとメンテが簡単

2021-01-10T10:31:37+09:00

フリーソフト9VAeきゅうべえの使い方をブログで説明しているが、訴えたいことを一言で伝えることというアドバイスをうけて「9VAeきゅうべえで動きをつけよう」という言葉をトップ動画GIFに入れることにした。

例１

修正後

修正前

9VAeの動画GIF修正は超簡単だった

9VAeで動画GIFを作っておくと、データ量が小さく（上の例では４枚の画像＋３KB）修正も簡単で、すきなサイズ、すきなフレームレートのアニメGIFがつくれる。めちゃかんたん！
Crieit にいれるGIFは２MB以下なので、画像サイズやフレームレートを調整して出力するが、9VAeだと簡単にできる。
Giam や PhotoshopでGIFアニメを作っていると、画像サイズやフレームレートの変更があとからできない。途中にコマをいれるのも大変。

例２

9VAeのダウンロード方法の説明動画GIFも修正

修正後

修正前

9VAe Mac版の起動方法が、右ボタン「開く」を２回実行にかわったのを修正。
9VAeだとパーツの差し替えで簡単に動画が修正できた。
右ボタン「開く」は、指のクリックアニメーションを複製し、２本指に形を変更。２本指タッチ動作を簡単に作れた。
9VAeすごい。

GIF動画の作成には9VAeきゅうべえ
ダウンロードはこちら

9VAeのデザインをきれいにしたい人はこちら

桜吹雪コンポーネント、作りました

2019-08-31T20:49:46+09:00

CSSとJavascriptで桜吹雪を作る

こちらのスクリプトをベースにさせていただきました。
春風そよよ〜！桜の花びらがヒラヒラ舞い落ちる JavaScript だよー！

完成度の高いスクリプトをありがとうございます...!
という感じだったのですが、レスポンシブデザインに入れると
横風エフェクトで画面外に流れた桜が勝手に幅や高さを拡張してレスポンシブが乱れるという問題が発生。

ついでにReactコンポーネントに

document.getElementByIdはnullになってしまうので、findByDOMNodeを使う。

g[i] = ReactDOM.findDOMNode(this.refs["hanabira" + i]);

要素をJSXで書ける。

let m = (
        {{
            zIndex: z + i,
            top: t[i],
            left: l[i]
          }}
        >
          
        
      );

レスポンシブ用に修正

勝手に幅を拡張しないように、デフォルトの幅を記憶しておく。

let w = window;
let defaultWidth = w.innerWidth - 10;
if (l[i] > defaultWidth) {
          l[i] = Math.random() * defaultWidth;
        }

デフォルトの幅を超えそうになったら座標をリセットする。

iOS対応

iOSでは負荷のかかる処理はNGで、自動的に制限されるイメージ。
手持ちのiPhone5Sで桜吹雪コンポーネントを検証すると、動作がカクカクしたので、

花びらの枚数を減らす
setIntervalの待ち時間を増やす

対応を行った。

ソース

github