Writing a game for Samsung SmartTV on JS
Hello. I am committed to developing for Samsung SmartTV. Due to the fact that there are few articles on this topic, I decided to fix it. Who cares step-by-step instructions on how to make your ping-pong on "smart telly" with the recognition of gestures - you are welcome under the cat.
In general, the debug process is fairly accurately described on samsungdforum.com .
(Guide-> Topic-> Getting started-> Testing Your Application on a TV) In a nutshell: to run on the emulator, just press one button in the IDE, to run on TV you need to make a package, upload it to the web server (everything is done in IDE) and synchronize applications with SmartTV (a few button presses on the remote).
Add to the project index.html as follows:
There is nothing to comment, everything is clear.
Accordingly, we need to add 2 more files: the CraftyJS library itself and the game code.
The first few lines of code tell the TV that the application is ready and can be displayed on the screen.
Next is quite a standard code on Crafty. Immediately you can ask the question: "Well, where are the gestures?". The answer is: gestures in the Samsung SmartTV are nothing more than a normal mouse. Accordingly, if in the browser your code responds to the mouse, then the TV will catch gestures (you, as it were, will control the cursor with your hand, and click with a gesture)
We start everything on the emulator and nothing works. Why? It's simple: CraftyJS is not aware of any consoles.
We find in the code CraftyJS an array of keyboard codes ("keys: {") and add the following:
I sent a pull request to the authors of craftyJS and it was accepted, so there is a possibility that this will already be present in your version of CraftyJS.
Changed, run on the emulator and again nothing works. Here again everything is simple: the emulator in my version does not support the mouse, and for the keys it waits for a special JS block, which is not needed for work on a real TV, so I dropped it. In general, it can be peeped in the default project that IDE creates.
For tests, you can run the game in Chrome, if everything works there, then it will start on TV.
Install the application on the TV, take a beer and a friend, and cut into casual ping-pong on a huge screen using gestures. Beauty.
As you may have guessed, I work for Samsung and now I am in South Korea. If anyone is interested in how I got here, write comments - I will prepare another post.
This is my first post, so any constructive criticism is welcome,
Preparing the toolbox
- First we need a computer with Windows (we tested it on a Mac virtual machine).
- Now we go to samsungdforum.com and download the SDK
I downloaded version 2.5.1 in order to cover as many models as possible. - Unfortunately, for commercial development the TV itself is simply necessary, because in fact the emulator and the real device sometimes differ greatly in behavior (well, recognition of gestures on the emulator is not tested). I used the 2012 model.
- As a JS engine for game development, I chose 2 alternatives for myself: Ivank Lib and CraftyJS . The fps test results showed that crafty is twice as fast, so I settled on it. This is due to the fact that Ivank uses canvas, which is not accelerated by hardware on SmartTV. A little bit of an insider: colleagues said that a lot of work was soon to come in connection with the rewriting of everything on HTML5 because, most likely, in the 2013 model, all HTML5 will be done “with preference and poetess”.
Debag
In general, the debug process is fairly accurately described on samsungdforum.com .
(Guide-> Topic-> Getting started-> Testing Your Application on a TV) In a nutshell: to run on the emulator, just press one button in the IDE, to run on TV you need to make a package, upload it to the web server (everything is done in IDE) and synchronize applications with SmartTV (a few button presses on the remote).
Development
- So we downloaded the SDK and the dev version of CraftyJS. Well, let's go.
- Launch the IDE in the SDK delivery, the so-called Samsung SDK TV Editor. Create a default javascript project.
- When creating a project, edit the “widgetname” property and add a property called “mouse” with the value “y” (this property will allow us to use the SmartTV chip - gesture control). All other properties can be left "by default".
- IDE will create for us a default project. It is generally not needed and can be completely cleaned up and leave only 2 files widget.info and config.xml.
Index.html file
Add to the project index.html as follows:
<!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> There is nothing to comment, everything is clear.
Accordingly, we need to add 2 more files: the CraftyJS library itself and the game code.
Game code 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"); The first few lines of code tell the TV that the application is ready and can be displayed on the screen.
Next is quite a standard code on Crafty. Immediately you can ask the question: "Well, where are the gestures?". The answer is: gestures in the Samsung SmartTV are nothing more than a normal mouse. Accordingly, if in the browser your code responds to the mouse, then the TV will catch gestures (you, as it were, will control the cursor with your hand, and click with a gesture)
Launch
We start everything on the emulator and nothing works. Why? It's simple: CraftyJS is not aware of any consoles.
We find in the code CraftyJS an array of keyboard codes ("keys: {") and add the following:
... 'REMOTE_UP': 29460, 'REMOTE_DOWN':29461, I sent a pull request to the authors of craftyJS and it was accepted, so there is a possibility that this will already be present in your version of CraftyJS.
Changed, run on the emulator and again nothing works. Here again everything is simple: the emulator in my version does not support the mouse, and for the keys it waits for a special JS block, which is not needed for work on a real TV, so I dropped it. In general, it can be peeped in the default project that IDE creates.
For tests, you can run the game in Chrome, if everything works there, then it will start on TV.
Install the application on the TV, take a beer and a friend, and cut into casual ping-pong on a huge screen using gestures. Beauty.
Conclusion
As you may have guessed, I work for Samsung and now I am in South Korea. If anyone is interested in how I got here, write comments - I will prepare another post.
This is my first post, so any constructive criticism is welcome,
')
Source: https://habr.com/ru/post/155007/
All Articles