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つのコマンドで、シェルの読み取りコマンドの共通パラメータを理解できます。

推薦する

さまざまな Tomcat ログと catalina.out ファイルのセグメンテーションの関係についての簡単な分析

Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....

Vue.jsでタブ切り替えと色変更操作を実装する解説

この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...

2つのVirtualBox仮想ネットワークをブリッジするLinuxブリッジメソッドの手順

この記事は、この時期の「ピーターから奪ってポールに払う」という仕事のスタイルに対する私の不満から生ま...

Vueコンポーネントは、写真やビデオをアップロードするためのサンプルコードをカプセル化します

まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...

Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード

1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

暗号化における https の Apache 展開の概要

目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...

CSS3+ベジェ曲線でスケーラブルな入力検索ボックス効果を実現

では、早速レンダリングを見てみましょう。 コア コードはtransition: cubic-bezi...

JavaScript による Web ページ カルーセルの超詳細な実装

目次HTML ページの作成js部分の機能を実装する1. 左ボタンと右ボタン2. 小さな円を動的に生成...

IE をフリーズさせる HTML コード

任意のテキスト エディターを開き、次のコードをコピーして、たとえば SomeFilename.htm...

html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明

目次1. classList属性2. 実用化以前の JavaScript では、最初にクラス属性を取...

2017 最新バージョンの Windows インストール MySQL チュートリアル

1. まず、MySQL の公式サイトから最新バージョンの MySQL をダウンロードします。リンクを...

MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析

多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...

dockerコマンドの使用にはsudoは必要ありません

docker デーモンは通常の TCP ポートではなくホストの Unix ソケットにバインドする必要...

MySQLのストレージエンジンについてお話しましょう

基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...