ツールボックスの準備
- まず、Windowsを搭載したコンピューターが必要です(Macの仮想マシンでテストしました)。
- 次に、 samsungdforum.comにアクセスしてSDKをダウンロードします
できるだけ多くのモデルをカバーするために、バージョン2.5.1をダウンロードしました。
- 残念ながら、実際のエミュレーターと実際のデバイスは動作が非常に異なることがあるため、商業開発にはテレビ自体が必要です(まあ、エミュレーターでのジェスチャー認識はテストできません)。 2012年モデルを使用しました。
- ゲーム開発用のJSエンジンとして、 Ivank LibとCraftyJSの 2つの選択肢を選択しました 。 fpsテストの結果は、クラフティが2倍高速であることを示していたので、それに落ち着きました。 これは、IvankがCanvasを使用しているためです。これはSmartTVでハードウェアアクセラレーションされていません。 少しの内部者:同僚は、HTML5ですべてを書き換えるにはすぐに多くの作業が必要になると述べました。2013年モデルでは、すべてのHTML5が「好みと詩人」で行われる可能性が高いからです。
デバッグ
一般に、デバッグプロセスはsamsungdforum.comでかなり正確に説明されています 。
(ガイド->トピック->はじめに->テレビでのアプリケーションのテスト)簡単に言うと、エミュレータでボタンを1つクリックするだけでIDEで起動し、テレビで実行するにはパッケージを作成する必要があり、それをWebサーバーにアップロードします(すべてがIDE)およびアプリケーションをSmartTVと同期します(リモコンのいくつかのキーストローク)。
開発
- そこで、CraftyJSのSDKバージョンと開発バージョンをダウンロードしました。 さあ、行きましょう。
- SDKの配信でIDEを起動します。SamsungSDK TV Editorと呼ばれます。 デフォルトのJavaScriptプロジェクトを作成します。
- プロジェクトを作成するときに、「widgetname」プロパティを編集し、「mouse」という名前のプロパティに「y」の値を追加します(このプロパティにより、SmartTVチップ-ジェスチャコントロールを使用できるようになります)。 他のすべてのプロパティは「デフォルト」のままにしておくことができます。
- IDEがデフォルトのプロジェクトを作成します。 一般に、これは必要ではなく、完全にクリーニングでき、widget.infoおよびconfig.xmlファイルは2つしか残せません。
Index.htmlファイル
次のコンテンツをindex.htmlプロジェクトに追加します。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>PongTv</title> </head> <body style="margin:0px;padding:0px;"> <script type="text/javascript" src="crafty.js"></script> <script type="text/javascript" src="pong.js"></script> </body> </html>
コメントする特別なものはありません。ここではすべてが明確です。
したがって、さらに2つのファイルを追加する必要があります。CraftyJSライブラリ自体とゲームコードです。
ゲームコードpong.js
if (window.curWidget) { curWidget.setPreference('ready', 'true'); } var wdth = 960; var hght = 540; var margin = 20; var back_color = 'rgb(0,0,0)'; var act_color = 'rgb(255,255,255)'; var ppdl_w = 20; var ppdl_h = 100; var ball_s = 10; Crafty.init(wdth, hght); Crafty.background(back_color); //Paddles Crafty.e("Paddle, 2D, DOM, Color, Multiway, Mouse") .color(act_color) .attr({ x:margin, y:(hght-ppdl_h)/2, w:ppdl_w, h:ppdl_h }) .multiway(4, { W:-90, S:90, REMOTE_UP:-90, REMOTE_DOWN:90 }); Crafty.e("Paddle, 2D, DOM, Color, Multiway, Mouse") .color(act_color) .attr({ x:wdth-margin-ppdl_w, y:(hght-ppdl_h)/2, w:ppdl_w, h:ppdl_h }) .multiway(4, { UP_ARROW:-90, DOWN_ARROW:90}) .bind('MouseMove', function (e) { this.y = ey-ppdl_h/2; }); //Ball Crafty.e("2D, DOM, Color, Collision") .color(act_color) .attr({ x:wdth/2, y:hght/2, w:ball_s, h:ball_s, dX:Crafty.math.randomInt(2, 5), dY:Crafty.math.randomInt(2, 5) }) .bind('EnterFrame', function () { //hit floor or roof if (this.y <= 0 || this.y >= hght) this.dY *= -1; if (this.x > wdth-margin) { this.x = wdth/2; Crafty("LeftPoints").each(function () { this.text(++this.points + " Points") }); } if (this.x < margin) { this.x = wdth/2; Crafty("RightPoints").each(function () { this.text(++this.points + " Points") }); } this.x += this.dX; this.y += this.dY; }) .onHit('Paddle', function () { this.dX *= -1; }); //Score boards Crafty.e("LeftPoints, DOM, 2D, Text") .attr({ x:margin, y:margin, w:100, h:20, points:0 }) .textColor('#FFFFFF') .text("0 Points"); Crafty.e("RightPoints, DOM, 2D, Text") .attr({ x:wdth -100, y:margin, w:100, h:20, points:0 }) .textColor('#FFFFFF') .text("0 Points");
コードの最初の数行は、アプリケーションの準備ができており、画面に表示できることをテレビに伝えます。
Craftyのさらに非常に標準的なコードはそれ自体です。 あなたはすぐに質問をすることができます:「さて、ジェスチャーはどこにありますか?」 答えは次のとおりです。SamsungSmartTVのジェスチャーは、通常のマウスにすぎません。 したがって、コードがブラウザーのマウスに反応すると、テレビはジェスチャーをキャッチします(つまり、カーソルを手で制御し、ジェスチャーでクリックします)
打ち上げ
エミュレーターですべてを開始しますが、何も機能しません。 なんで? 簡単です。CraftyJSはリモートを認識していません。
CraftyJSコードでキーボードコードの配列(「キー:{」)を見つけ、以下を追加します。
... 'REMOTE_UP': 29460, 'REMOTE_DOWN':29461,
CraftyJSの作成者にプルリクエストを送信し、それを受け入れたので、これがあなたのバージョンのCraftyJSに既に存在する可能性があります。
変更し、エミュレータで実行しても、何も機能しません。 ここでも、すべてが簡単です。私のバージョンのエミュレーターはマウスをサポートしておらず、キーについては特別なJSブロックを待機します。これは実際のテレビで動作するのに必要ないため、省略しました。 一般に、IDEを作成するデフォルトのプロジェクトで確認できます。
テストでは、ゲームはChromeで実行できます。すべてがそこで動作する場合、テレビで開始されます。
テレビにアプリケーションをインストールし、ビールと友人を連れて、ジェスチャーを使用して巨大な画面でカジュアルなピンポンに切り込みます。 美人
おわりに
ご想像のとおり、私はサムスンで働いており、現在韓国にいます。 私がここに来た方法に興味がある人は、コメントを書いてください-別の投稿を準備します。
これは私の最初の投稿なので、建設的な批判は歓迎します。