Webstorm Cocos 2 d-HTML 5開発デバッグ環境の迅速な構築

この文章では、Cocos 2 d-HTML 5の開発と実行環境を迅速に構築する方法を学びます.スクリプトにとって、多くのエディタは文法のハイライト表示を提供し、意味の補完はありません.一部の開発環境では自動補完機能を提供していますが、あまり使いません.ここではWebStormの使用を推奨し、IDE(統合開発環境)として非常に強力なコード補完があり、その補完はかなりスマートで、開発効率を高めています.Google Chromeブラウザと協力して、リアルタイムの編集とデバッグ機能を完了することもできます.もちろん他の選択肢があります.詳細な構成手順を説明します.
環境準備
開始前に、まず必要なファイル、依存などをダウンロードし、Cocos 2 d-HTML 5に対して現在の最新の安定バージョン、2.1.5を使用します.ここでダウンロードできます.WebStormは公式サイトにアクセスし、自分のシステム環境に応じてダウンロードを選択してください.ここでは6.0.2バージョンを使用しています.IDEがブラウザと連携してデバッグを編集できるようにするには、Chrome jetbrains-ide-supportプラグインをインストールする必要があります.以上の3つがあれば、配置できます.ここではMac OS Xをシステム環境としている.
WebStormプロジェクトの構成、コード補完機能
開発を開始する前に、Cocos 2 d-html 5をWebStormプロジェクトプロジェクトに導入する必要があります.
まず、Cocos 2 d-html 5-v 2を解凍する.1.5.zip圧縮パッケージ.
WebStormを開いてウェルカムインタフェースに入り、サイドCreate New Project from Existing Files項を選択します.Select scenario最後の項目「Source files are in a local directory...」を選択し、次のをクリックします.
フォルダをCocos 2 d-html 5-v 2にナビゲートします.1.5ディレクトリをクリックし、Project Rootをクリックしてディレクトリと設定します.
「Finish」をクリックしてプロジェクトのインポートを完了します.
以上の手順を完了すると、WebStormですべてのコンテンツを開くことができ、編集HelloHTML5World/src/myApp.jsは、現在のプロジェクト全体にjsソースコードが含まれているため、自動補完機能を完了することができます.
他の場所のプロジェクトにjsライブラリが含まれていない場合は、実際の必要に応じて手動でライブラリを追加します.Cocos 2 d-html 5の補完を完了し、以下の方法でjsライブラリを追加します.
メニューWebStorm PreferencesをクリックしてSettings画面に入りますProject SettingsのうちJavaScriptに位置するLibrariesオプション.Addボタンをクリックして、ライブラリ追加構成画面に入ります.
図に示すように、ライブラリ名を記入し、Attachで追加ディレクトリを参照し、必要に応じてライブラリディレクトリを含めてOK!
以上は、他の独立したプロジェクトでCocos 2 d-html 5ライブラリを使用する場合の環境構成です.このように任意のプロジェクトにCocos 2 d-html 5のライブラリを追加することができ、プロジェクトの「External Libraries」ですべての依存ライブラリを見ることができます.
ブラウザ同期作成リアルタイムリフレッシュ、単一ステップデバッグ
WebStormを使用して環境を開発する手順は以上ですが、同様に実行をブラウズし、効果を確認する必要があります.
プロジェクトのホームディレクトリのindexを右クリックします.htmlデバッグindexを選択します.html後、Chromeでこのページ(システムのデフォルトブラウザ)が開きます.開くと、システムファイルのパスが表示されます.たとえば、次のようになります.url = “file:///Users/leafsoar/Cocos2d-html5-v2.1.5/index.html”
注意が必要なのは、このように開いているページは、静的なページは正常に閲覧されているが、Hello Worldを選択して実行するとロードできないため、cococos 2 d-html 5の処理メカニズムとブラウザの互換性の問題(他のブラウザでは異なる結果が得られる)によるもので、http://localhostのようなサービスで実行することを公式に推奨している.
ここではブラウザにhttp://localhost:63342/Cocos2d-html5-v2.1.5/と入力して現在のプロジェクトにアクセスし、ChromeでもJetBrainsプラグインをインストールして連携します.これにより、プロジェクト内の静的ページを変更すると、自動的にページに更新され、リアルタイムの効果が表示されます.http://localhost:63342はWebStormによってサービスが提供され、プロジェクト名とともにサービスでページにアクセスし、効果を表示します.
デバッグ手順は、右クリックデバッグindexを変更する必要があります.htmlのurlアドレス.ツールバーをクリックして、構成をデバッグします.index.html右側のドロップダウンEdit Configurationsは、デフォルトのPathアドレスを次のとおりにします.“/Users/leafsoar/Cocos2d-html5-v2.1.5/index.html”を図のように“http://localhost:63342/Cocos2d-html5-v2.1.5/”に変更します.
以上の構成が完了すると、「HelloHTML 5 World/src/myApp.js」のようなコード設定でブレークポイントを設定し、プロジェクトをデバッグして実行し、Hello Worldをテストすると、単一ステップでデバッグできます.HelloHTML5Worldを変更して迅速に学習することができます.templateは、独自のプロジェクトを構築する必要がある場合は、それをコピーし、それに基づいて独自のコードプログラムを作成するプロジェクトテンプレートを提供します.
転載先:http://www.ityran.com/archives/4857