Cocos Creator 3.6の主な改善点

Cocos Creator 3.0では2Dと3Dを統合しましたが、その後、6つの重要なリリースを重ねてきました。その中には、世界初のHarmonyOSサポートや中国初のNintendo Switchサポートといったプラットフォームサポートの追加、ライティングモデルの最適化やモバイル向け遅延レンダリングパイプラインのサポート、アニメーションシステムMarionetteなどの3D必須機能の追加、開発体験の向上や3Dおよび2Dプロジェクトのパフォーマンス最適化などが含まれています。この2年間の一連のリリースでの進化を見ていただくと「小さな一歩が千里につながる」ということを実感していただけるのではないかと思います。

3.0のマージ以来だと、Cocosチーム内で3.6を最も重要なマイルストーンとして扱ってきました。これまでで最も長いイテレーション・サイクルを設けて、開発効率、ランタイム・パフォーマンス、グラフィカルな表現力において大きく進化しているのがお分かりになるかと思います。

昨年の3.3リリース以降、最も重要な開発メンバーのうち何人かは、3.6ブランチに取り組んできました。このような長い開発サイクルは、何らかの根本的なリファクタリングに必要な場合が多いのです。業界全体にサービスを提供する商用エンジンの特殊性から、常にハードウェアの開発に追随して最高のグラフィック性能に挑戦し、プロジェクトとの互換性や異なるハードウェア環境へのスケーラブルな適応を維持するために、制作サイドの生産性を継続的に向上させる必要があるとされています。

これらの課題は、エンジンが、2Dエンジンから3Dエンジンへの進化のように、時には破壊的に、基礎となるフレームワークの継続的な反復とリファクタリングを必要とすることを意味します。ほとんどの場合、この反復は、3.6に向けた私たちの当初の進展のように、継続的なものです。この進化には多くの共有すべきものがあり、この最新版Cocos Creatorの壮大なハイライトをいくつか紹介したいと思います。私たちの仕事を見ていただくと、エンジン開発の永遠の命題を垣間見ることができるかと思います。それは、ハードウェアの更新やユーザーニーズの変化に対応するためには、絶え間ない自己変革が必要だ、ということです。

注：WindowsプラットフォームはWin32へのパブリッシュをサポートしなくなりました。Win64のみ対応しています。iOSプラットフォームの最小サポートバージョンは、iOS 10.0からiOS 11.0に変更されました（C++ 17を使用するため）。

アップデートに関する全リストと変更ログは、フォーラムの[developer notes](https://discuss.cocos2d-x.org/t/cocos-creator-3-6-0-released/56615)をご覧ください。


<iframe width="560" height="315" src="https://www.youtube.com/embed/Jy0SOq211cA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# より多くのネイティブ・モジュールでより高いパフォーマンスを

Cocosエンジン・チームは、バージョン3.3のリリース以来、より高いパフォーマンス、互換性、スケーラビリティ、そして生産性を実現するために、コアエンジンのフレームワークを継続的にイテレーションとリファクタリングを行なってきました。

古いプロジェクトとの互換性を維持しつつ、大幅な全体的な改善を達成するために、エンジンチームは複数のフェーズとモジュールでエンジンをリファクタリングするのに1年以上かかりました。

パフォーマンスの大幅な向上とレンダリングの強化をもたらすと同時に、今後のエンジンのさらなる改良のための土台となるものです。

![1-1024x769.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/e60c9689-420a-a652-95bc-e84aba0ec252.gif)
![image-18-1024x706.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/c44a6361-7726-ea51-8c88-2e8bbf94569f.png)

また、これらのネイティブモジュールは、2.xと同レベルの2Dレンダリング性能を達成するという重要なマイルストーンとなります。これは、2.xユーザーが、3Dの追加や継続的な反復の必要性がある場合に、安心して3.xにアップグレードできることを意味しています。2Dのバッチ処理とレンダリング送信処理は、すべてネイティブで行われ、2.xと同等の性能を実現しています。もちろん、Spineのバッチ処理サポートなどの積み残しはありますが、ネイティブの上に3.xの2Dレンダリング性能の上限があることを意味します。

![image-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/e9900359-b9f0-2313-b047-05ea202a5584.png)
![image-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/40605ab3-137d-3e5d-046f-3de14c0968d7.png)
![image-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/564671aa-f370-4b4f-15c0-bf0589341209.png)

# マテリアル、アニメーション、パーティクルのアップグレード

進化という点では、3.6は新しい外観、新しいマテリアルAPI、新しいインポート体験、そしてアニメーション埋め込みプレイヤーやパーティクルノイズマップなどの新機能を提供します。ユーザー視点から見ると、これらはどのような意味を持つのでしょうか。まず、エディタのUIとインタラクションエクスペリエンスの進化が挙げられます。何百もの細かな変更により、開発者の方は、エディタがより良い体験と快適な外観を与えてくれることを直感的に感じられるでしょう。第二に、ライティングモデルとレンダリングアルゴリズムの一連の新機能により、Cocosは最新のモバイルゲームの品質に匹敵するグラフィックを持つゲームを開発できるようになり、特に以下に記したカスケードシャドウと異方性マテリアルを使うと、ゲームをワンランク上のものにできるかと思います。

# 主なアップデートの詳細
## サーフェスシェーダー カスタムマテリアル
サーフェスシェーダは、統一されたレンダリングプロセスと構造を使用しており、ユーザーはクリーンなコードでサーフェスマテリアル情報を作成し、その組み合わせに使用するライティングとシェーディングモデルを指定することができます。旧バージョン（レガシーシェーダー）と比較すると、記述やメンテナンスが簡単で、バージョンの互換性が高く、レンダリングエラーが発生しにくいという利点があります。そして、統一されたフルシーンライティングやDebug Viewのデバッグ機能など、統一された処理で多くの公開機能を得ることができます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/lSw9MADtdEQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

また、Cocos Creatorは、一般的で複雑な様々なマテリアルをユーザーに簡単に拡張できるようにし、Effectコードを自動生成するShader Graphをサポートする予定で、Shader開発者方の効率は大幅に向上できるかと思います。

## 新しいレンダリングデバッグビュー
この機能は、マテリアル、ライティング、シャドウの表示に関する問題をより迅速に調査するために、様々なカスタム表示モードを提供します。また、特定のシーン情報をより明確に表示することができ、最適化を決定するための参考資料となります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/gA1IXLRORrI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## カスケードシャドウマップ
通常のシャドウマップには重大な欠点があります。投影領域が大きい場合、良好な影効果を得るためには非常に高解像度のシャドウマップテクスチャが必要となり、ハードウェア容量の限界を超えてしまうことがあります。解像度を上げないと、影はギザギザで形のない不鮮明なものになりますが、投影面積を小さくすると、影の距離が非常に短くなり、少し離れたオブジェクトは影が消えてしまいます。影の距離と影の質のバランスを調整するのは大きな頭痛の種で、以前のバージョンでもそうでした。

CSM( Cascade Shadow Map ) は、視野錐台を近景から遠景まで複数のブロックに分割し、近景ブロックの投影面積を小さく、遠景ブロックの投影面積を大きくして、適応型シャドウマップと同等にし、シャドウマップテキストの使用量を数倍に増やしました。近いオブジェクトには非常に精密な影を、視点からの距離が長いオブジェクトにはちょうど良い影の効果を持たせることができるので、開発者は影のパラメータ設定に時間を割く必要がなくなりました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/jl63lISQYAE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## GGX コンボリューション
直接照明のスペキュラは GGX BRDF モデルを使用しているため、環境照明では、両光源 の照明効果を対応させるために、同じ BRDF を使用して球面コンボリューションを行う必 要があります。また、粗さの異なる反射情報を対応するミップマップレベルに格納することで、コンボリューション計算により、自動生成ミップマップと比較して、以下の問題を解決することができます。

1. 環境照明のスペキュラのフラッディングやトレーリングが大幅に低減
2. Substance標準のPBRマテリアルとは異なる効果
3. 直接照明と環境照明のスペキュラの違い

下図をご覧ください
![image-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/3c7ffcbc-e98e-c414-d5c6-fccd937e4e56.png)自動生成されたミップマップ

![image-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/54f001e2-240d-e5f1-274d-6373221df88f.png)GGXコンボリューションミップマップ
    

<iframe width="560" height="315" src="https://www.youtube.com/embed/SvabukAPuBo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

GGXコンボリューションに基づく反射 vs. ダイレクトライティング vs. オートミップマップに基づく反射

## 異方性照明
サーフェスシェーダの恩恵により、PBRライティングモデルを完全に拡張することができます。v3.6では、等方性、異方性マテリアル、ダイレクトライティングと環境ライティングのライティングモデルが完全にサポートされています。Substance PBRマテリアルライブラリを使用して、ブラッシングされた金属、髪、シルクなどを作成することができます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_MjFIr9Z6Kk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

![image-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/e367b87d-87dd-1736-a681-233be480d6ed.png)
![image-25-1024x837.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/6465fb77-2cc0-9d6a-687a-d43abe21b30f.png)
![image-27-1024x665.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/6e3fcd52-3841-3ce2-0587-02950fb1ec3d.png)

## エディターUIが全面的にバージョンアップ
V3.6では、エディターUIが一新されました。今回の改訂では、「より協調的な」視覚システム、「より直感的な」視覚フィードバック、「より没入感のある」インタラクション感覚を基本に、UIとインタラクションを全面的に再編成しています。今後も、Cocosのデザイン目標、デザインシステム、デザイン原則に基づいてデザインを標準化し、コアとなるインタラクションやワークフローを最適化するためのアップデートとイテレーションを繰り返していく予定です。

![image-41-1024x592.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/3f9c66b0-0bcd-4f69-9dff-ea56570e5ade.png)
## 新しいプレビュー・モード
開発効率は、Cocos Creatorが重要視しているコアバリューですが、v3.6ではさらに改善されました。ブラウザでプレビュー "と "シミュレータでプレビュー "に加え、開発者は "エディタでプレビュー "を使ってプロジェクトをプレビューすることができるようになりました。このモードでは、シーンマネージャーが直接コードを実行するため、開発者はリアルタイムでシーンをデバッグすることができます。シームレスなプレビュー体験をもたらす一方で、デバッグの欠点も補うことができます。

この機能は現在実験段階です。ぜひ、ご意見をお聞かせください。今後も、開発効率を重視し、スクリプトコンパイル、プロジェクトデバッグ、ビルドリリースにおけるユーザーエクスペリエンスの向上を継続していきます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Z5AEV30g7iU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## アニメーションクリップにプレイヤーを埋め込む
Animation Editorは、プレイヤーを埋め込む機能を追加しました。開発者は、任意のアニメーションに、他のパーティクルや他のアニメーションを埋め込むことができます。しかも、ビデオ編集ソフトでトラックを編集するような感覚で、持続時間や再生位置などを自由にプログラムすることが可能です。

編集後、埋め込まれたプレーヤーのコンテンツは、このAnimationClipと一緒に再生され、AnimationコンポーネントとAnimation Graphの両方でサポートされます。この機能はFBXからのアニメーションにも対応しており、より柔軟なエフェクトコントロールが可能で、インポートしたアニメーションの再編集が難しいという問題を解決しています。

パーティクルプレイヤーとアニメーションプレイヤーの両方は現在3.6で利用可能で、ラボの設定で有効にすることができます。

![MTY4ODg1NDc2OTI4MTUyMQ_489891_ZM-es2iL7NkU_JS7_1660121255-1013x1024.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/75651efd-9916-774c-bac5-8bc7018acb40.gif)
![MTY4ODg1NDc2OTI4MTUyMQ_455769_sCiialNKc0dNfTK6_1660113725.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/d1d80e7f-f70b-b016-e0da-0db85faa1752.gif)

## 多言語サポートが統合されたローカライゼーションエディター
市場の変化に伴い、cocosユーザーのローカライズに対する需要が大幅に増加し、強力なL10nツールが不足しているため、バージョン3.6から公式プラグイン「Localization Editor」が内蔵されました。

その中心的な目的は、高度に自動化されたツールによってユーザーの翻訳効率を向上させ、コードレスでユーザー使用の敷居を下げ、ツールをすぐに使える人なら誰でも使えるようにすることです。

![image-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/9e582793-a8df-e692-cc47-9d00ea9ecf48.png)

含まれているコア機能は、次のとおりです。

1. サポート機械翻訳、現在Googleに接続されている、Youdaoの翻訳
2. 翻訳されるべき内容のワン・クリックの抽出のためのサポート
3. .xls、.xlsx、.csv、.poファイルのバッチインポートおよびエクスポートをサポートします。
4. サポート多言語の速い切換えおよび下検分

## シーンエディタ
シーンエディタに新しいサーフェススナップとバーテックスナップの機能を追加

* サーフェススナップ (Ctrl/cmd + Shiftを押したまま)

![image2-1-1024x683.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/316e6f94-1906-f596-7ceb-84237b76722d.gif)

* 頂点スナップ (vを押し続ける)

![image3-1024x683.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/d39a84cf-cdd9-0610-4d73-816746dbf98b.gif)

ボックス選択機能をサポートし、複数のオブジェクトを一度に選択することができます。

![image4-1024x519.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/3115e56a-ddaf-f8d9-760a-5af6ca22b2bb.gif)

## Marionette アニメーションシステムのアップデート
* Animation Graphは編集中のプレビューに対応しました。

アニメーションのステートマシンを編集する際に、リアルタイムにプレビューして遷移やブレンドの結果を確認することができ、修正後にいちいちゲームを起動して結果を確認することなく、素早くデバッグを行うことができます。

![image-34-1024x711.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/52233dff-65e1-c81f-b2f0-ecc0c30877ce.png)

* アニメーション図が変数とレイヤーの名前変更に対応
* アニメーションマップがトランジションラインの順序付けに対応
* アニメーション図に「終了開始時間」プロパティが追加され、トランジションの対象アニメーションを指定した位置から再生開始できるようになりました。
* アニメーション図で、トランジションを割り込み可能に設定し、指定したトランジションが他のトランジションに割り込まれるようにすることができるようになりました。この機能は、ラボの設定で有効にすることができます。

## パーティクルシステムの更新
* 新しいNoiseモジュールにより、パーティクルに対してより自然で制御可能なランダムモーション効果がもたらされました。

![image-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/89c46d6e-b86f-8530-1448-ca7f882557c5.png)
![MTY4ODg1NDc2OTI4MTUyMQ_310874_fF4bUvY8hRLa3j-A_1660113909-1024x576.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/b3601830-7d18-03f9-5b9b-73932cff270d.gif)

* パーティクルシステムのモデルがGPU Instancingに対応し、エミッターのパフォーマンスが向上
* パーティクル編集で「元に戻す」操作に対応し、パーティクルエフェクトの作成効率が向上
* パーティクルグループのプレビューと制御を階層構造でサポート

## デフォルトでモデルを分割しない

![image-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/663ecc8d-6115-923e-11fa-99163ec74924.png)

CPUで計算するスケルトンアニメーションでは、ユニフォームの数の制限により、ある値を超えるとユニフォームによるスケルトンデータを一度に格納できなくなるため、以前のバージョンではメッシュとボーンを分割することがありました。主にここで自動的に分割されるため、キャラクターモデルの1つが複数の描画コールを占有するというフィードバックをよく受けました。さらに、分割は実行時に行うことができず、前処理しかできないため、我々の分割基準は下位のハードウェアデバイスやドライバ（iPhone 6 WebGL）しか参考にできず、スケルトンの数に対して非常に制限があります。

そこで、Cocos Creator 3.6では、この問題に対して、以下のように戦略的な最適化を行いました。

* デフォルトでは、モデルは分割されなくなり、インポートされたモデル・データは変更されません（モデル設定も変更されないままです）。
* ボーンの数が実際のランタイムドライバの制限を超えない場合、ユニフォームを使って直接渡されるようになる
* ボーン数が制限を超える場合、テクスチャを使用して渡されます。


__ 注意 __ テクスチャを使ってスケルトンアニメーションデータを渡すには、バーテックスシェーダでテクスチャにアクセスする機能が必要です。この機能は OpenGL ES 3.0、WebGL 2.0 で最低限サポートされています。しかし、GL 拡張に依存しているため、OpenGL ES 2.0 と WebGL 1.0 しかサポートしていないデバイスではほぼ 100% カバーされており、互換性の問題を気にする必要はありません。

このオプションは、現在、古いプロジェクトとの互換性を維持するためにのみ残されており、適切な時期に削除が検討される予定です。

## メッシュの更新
- 動的メッシュをサポートし、開発者はAPIを通じて実行時にメッシュデータを更新できるようになりました。

![image-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/b8d30b5b-b202-64b0-2797-cfae11b5b181.png)

- GeometryRendererに新しい曲線タイプSplineを追加（Linear、Bezier、Catmull-Rom曲線に対応）

![image-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/297ee232-02e2-f374-2121-a5470e576c4b.png)

- 地形高さブラシのサポート

![image-1024x662.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852397/c02a5a2d-dbe6-a9ef-66f3-600f48b96e69.gif)

[Cocos Creator 3.6 とCocos Dashboardをいますぐダウンロード](https://www.cocos.com/en/creator/download)

[引用元](https://www.cocos.com/en/major-improvements-in-development-come-with-cocos-creator-3-6)