CocosCreatorでWeChatゲームを作成する方法

CocosCreatorでWeChatゲームを作成する方法

CocosCreator はバージョン 1.8 以降、ワンクリックで WeChat ミニプログラムを公開できるようになりました。公開の詳細な手順は次のとおりです。

1. WeChatパブリックプラットフォームからWeChat開発者ツールをダウンロードする

アドレス: https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115、必要に応じて対応するバージョンを選択してください。

2. Cocoscreatorの設定

Cocos Creator --> 設定 --> ネイティブ開発環境を選択し、WechatGame プログラム パスを構成して、[保存して閉じる] をクリックします。

3. ビルドリリースを構成する

次のインターフェース:

ゲーム名は必要に応じて記入でき、公開プラットフォームはWeChat Gameにすることができます。WeChatミニゲームはappidなしでもデバッグをサポートできるため、appidは当面空白のままにしておくことができますが、機能が制限されます。プロジェクトのニーズに応じて、初期シーンと構築に関連するシーンを選択します。公式ドキュメントによると、MD5 キャッシュをチェックする目的はバージョン管理を行うことです (わからない場合は、最初に確認してください。後で役立ちます)。詳細については、公式ドキュメントを参照してください。 矢印 3 で指しているコンテンツが完了と表示されたら、ビルドが成功したことを意味します。予想外の事態に遭遇することなく直接ビルドに成功したため、落とし穴があるかどうかはわかりません。問題が発生した場合、最も直接的な方法は、作成者のhelloworldプロジェクトを使用してコンパイルすることです。コンパイルが失敗する場合は、環境構成に問題がないか確認してください。 すべて正常です。[実行] をクリックします。

4. アプレットプロジェクトを開く

初めて開くと、次のインターフェースが表示されます。

ミニプログラムプロジェクトを選択し、次のインターフェースに入ります

プロジェクトディレクトリ(プロジェクトパス)\(プロジェクト名)\build\wechatgameを選択します。appIdがある場合は直接入力するか、登録することができます。デモを作成して試してみたので、ミニゲームを直接選択して[OK]をクリックします。

5. WeChat開発ツールを導入する

この時点で、編集したゲームインターフェースが表示されます。インターフェース上で直接ゲームをプレイして、ゲームに問題がないか確認することもできます。ちなみに、初心者にはチュートリアルをおすすめします。http://www.byjth.com/CocosCreator/66.html は、「目を閉じると暗くなる」という人が書いたブログです。これは、Creator を使用してゲームを作成する方法を学ぶ初心者に最適です。チュートリアルを読むだけでは役に立ちません。重要なのは、もっと学び、もっと実行することです。このゲームは彼のチュートリアルに従って作られました。

6. コンパイル

このミニゲームの実行は、ツールの左側にあるシミュレーター インターフェイスで確認できます。

7. プレビュー

WeChatでQRコードをスキャンすると、携帯電話で最初のミニゲームを体験できます。ただし、注意すべき点が 1 つあります。このチュートリアルに従うと、この問題が発生する可能性があります (コード パッケージのサイズは xxxx kb で、上限は 4096 kb です。ファイルを削除して再試行してください)。運が良ければ、パッケージ サイズが 4096 kb 未満であれば、携帯電話でプレイできます。はい、心配しないでください。今すぐ穴を埋めましょう。 公式ドキュメントによると、ミニゲームの環境では、リソース管理が最も特別な部分です。ルールの 1 つは、すべてのコードとリソースを含めて、ミニゲーム パッケージのサイズが 4 MB を超えないことです。追加のリソースは、ネットワーク リクエストを通じてダウンロードする必要があります。これはちょっと恥ずかしいですね。たった 4M なので、インターネットからダウンロードするしかありません。心配しないでください。cocoscreator がすでにカプセル化して直接呼び出すことができるので、扱いは非常に簡単です。 具体的な手順は次のとおりです。

  • ビルドの際には、上記でチェックしたmd5Cacheにチェックを入れてください。チェックされていない場合は、再構築してください。
  • ミニゲームリリースパッケージ内の res フォルダ全体をサーバーにアップロードします。
  • リリース パッケージ内の res フォルダーを削除します。
  • main.js で、対応するコード スニペットを見つけて、REMOTE_SERVER_ROOT の設定を追加します。 require('libs/wx-downloader.js'); // このコード行を追加して、URL を正しい res リモート パスに変更します。 wxDownloader.REMOTE_SERVER_ROOT = 'https://www.xxx.com/remote-res/'; boot(); PS: 追加する場所がわからない場合は、メイン ファイルで boot() を検索し、else if (true) を見つけてここに追加します。さらに、ネットワーク アドレスは res の親ディレクトリ、つまり res の上位レベルを指します。しかし、後からgame.js以下にもこのパスがあることがわかったので、そこに直接URLを記述したら動きました。細かいことはよくわかりませんが、どちらかに記述すればいいだけです。
  • テスト段階では、公式サーバーにデプロイできず、テスト用にローカルサーバーを使用する必要がある場合があります。この場合、WeChat 開発者ツールの詳細ページを開き、プロジェクト設定で「安全なドメイン名、TLS バージョン、HTTPS 証明書を検証しない」オプションをオンにしてください。

8. プレビューの成功

QRコードが生成されます。WeChatを使用してスキャンし、ミニゲームを開きます。このとき、コンパイル例外が表示される場合があります。あまり心配しないでください。まずは実行効果を確認してください。完全に黒い画面が表示される場合があります。右上隅の ... をクリックし、[デバッグを開く] を選択します。QR コードをもう一度スキャンすると、プログラムが携帯電話で実行されます。
この時点で、ミニゲームの開発と展開は完了です。

上記は、CocosCreatorを使用してWeChatミニゲームを作成する方法の詳細な内容です。CocosCreatorを使用してWeChatミニゲームを作成する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • CocosCreator 入門チュートリアル: ネットワーク通信
  • Cocos2d-x 3.x 入門チュートリアル (パート 2): ノード クラス
  • Cocos2d-x 3.x 入門チュートリアル (I): 基本概念
  • Cocos2d-x 入門チュートリアル (詳細な例と説明)
  • CocosCreatorでシューティングゲームを作る詳しい解説
  • CocosCreatorでクールなレーダーチャートを描く方法
  • CocosCreator MVCアーキテクチャの詳細な説明
  • CocosCreatorメッセージ配信メカニズムの詳細な説明
  • CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明
  • CocosCreatorでゲームコントローラーを使用する方法
  • CocosCreator Huarongdaoデジタルパズルの詳しい説明
  • CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

<<:  Win7 システムでの MySQL 5.7.11 の詳細なインストール チュートリアル

>>:  1つのコマンドで、シェルの読み取りコマンドの共通パラメータを理解できます。

推薦する

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...

JavaScript のモジュール性の説明

目次序文: 1. コンセプト2. モジュール化の利点3. 複数のスクリプトタグを導入した後の問題1....

Linux での MySQL 5.6.24 (バ​​イナリ) 自動インストール スクリプト

この記事では、Linux環境でのmysql5.6.24自動インストールスクリプトコードを参考までに共...

Docker での環境変数の使用とよくある問題の解決策

序文Docker はコンテナの環境変数を設定できます。設定方法は 2 つあります。イメージを作成する...

MySQL トリガーの紹介、トリガーの作成、使用制限の分析

この記事では、例を使用して、MySQL トリガーの概要、トリガーの作成方法、およびトリガーの使用上の...

Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作

序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...

react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する

目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...

Docker で Java 8 Spring Boot アプリケーションを開発する方法

この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...

ES9の新機能の詳細な説明: 非同期反復

目次非同期トラバーサル非同期反復可能トラバーサル非同期反復生成非同期メソッドと非同期ジェネレーター非...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

Linux で killall コマンドを使用してプロセスを終了する 8 つの例

Linux コマンドラインには、プロセスを強制終了するためのコマンドが多数用意されています。たとえば...

レスポンシブフレームワークのテーブルヘッダーの自動改行問題に対する簡単な解決策

最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...

MySQL でトリガーを無効化および有効化するチュートリアル [推奨]

MYSQL を使用する場合、トリガーがよく使用されますが、不適切な使用によって問題が発生する場合が...

ウェブページをデザインする際に注意すべきいくつかの問題

Web デザインは、個人の好みや Web ページの内容に応じて、デザインのレイアウトが常に変化します...

src 属性と href 属性の違い

src と href には違いがあり、混同される可能性があります。 src は現在の要素を置き換える...