Making HTML5 / Flash games in Java

PlayN and “How Rovio Angry Birds Wrote HTML5”

At the last Google IO conference in San Francisco, the PlayN library was introduced. The session was called - Kick-ass Game Programming. And this technology really looks tempting. Just imagine that you write the game in the same language on any OS and using your favorite IDE, and you get the game under HTML5 / Android / Native / Flash (!). PlayN is free and open source, and Angry Birds (HTML5) was also made on it.

Viper Engine and PlayN

A couple of weeks ago, I decided to make a game on PlayN and realized that the level of abstraction that the developers chose does not make it possible to quickly create games. The platform needs a framework that will solve common problems when writing 2d games. Such tasks as: animation, particle effects, game camera, game scene and scene change, simple physics, assembling game objects into groups.
A week later, the alpha version of the Viper engine was made with the help of which we will create a simple HTML5 game in Java.

Cooking tools

1. Install PlayN

First, let's start playn and its examples:
Getting Started with PlayN
Clone the library PlayN:
PlayN code is contained in Git. If you have Git installed:

git clone code.google.com/p/playn
')
You need Maven version 3 or higher to build PlayN. You can install Maven via the following link: install Maven .

Check the version of Maven:
mvn -V
It should be 3 and up.

After we set the playn to the maven local storage.

cd playn
mvn clean install

To run one of the PlayN examples:

cd playn / sample / showcase
mvn clean package
mvn test -P test-html

Open the browser (of course Google Chrome) and enter: 127.0.0.1:8080/
Great, you can see the demo that Google engineers presented at IO.

mvn test -P test-flash
And now flash. Enter: localhost: 8080 /

cd android
mvn android: deploy
And Android.

And don't forget to install Eclipse plugins to continue your work in the IDE.
Install Maven Integration for Eclipse, choose Help → Install New Software, select All Available Sites and search for the word maven.
Install the Google Plugin for Eclipse .
Install the Web Tools Platform for Eclipse. Choose Help → Install New Software ..., enter download.jboss.org/jbosstools/updates/m2eclipse-wtp select Work with, and install Maven Integration for WTP.

2. Create the skeleton of the future game in Eclipse

Open File → New → Other ..., then select Maven → Maven Project then click next.

We tick Include snapshot archetypes and double-click on playn-archetype in the list of archetypes.

Customize Group Id, Artifact Id, Version, Package, and gameName.
Group ID example: com.mydomain.myproject.
Artifact ID example: gameamazing
Version example: 1.0-SNAPSHOT or 0.01a
Package example: com.mydomain.myproject
Well, gameName example: LolGame

Click Finish and get 5 projects in the Package Explorer.
Great we have a skeleton game.
For a note, the setup procedure for all of this will take significantly more time than writing the game itself.

3. We get Viper Engine with examples

Viper demos
git clone Partysun@github.com/Partysun/Viper-Engine-Demos.git

cd viper-engine-demos
mvn clean install
mvn test -P test-html

Now import the project into Eclipse.

And you can use.

We write games

A game on the Viper Engine must have an input class inherited from VipGame.

In the constructor set the initial values ​​for the game.
public ViperExamples() {
// .
// .
// .
super(640, 480, 800, 800, new LogoDemo(), 33);
}


The game scene on the Viper should be inherited from VipState.
And it requires an overload of the create () method;
It describes everything that should be on stage. And for dynamic processing in game cycles, you need to overload the update () method;

Here is an example of simply creating a pair of sprites and modifying them in time:
public class MovingDemo extends VipState{

private VipSprite img;
private VipSprite img2;
private VipKeyboardStandart kListener;

@Override
public void create() {
img = new VipSprite(20, 20, "images/house.png");
add(img);
img.velocity.x = 0.2f;

img2 = new VipSprite(270, 200, "images/house.png");
add(img2);
img2.angularVelocity = 0.002f;

kListener = new VipKeyboardStandart();
addKeybordControl(kListener);
}

@Override
public void update() {
super.update();
if (kListener.ESC) {
VipG.switchState(new LogoDemo());
}
if (img.x > 350)
img.velocity = new VipPoint(0, 0.2f);
if (img.y > 250)
img.velocity = new VipPoint(- 0.2f, 0);
if (img.x < 20)
img.velocity = new VipPoint();

if (img2.scale.x < 2)
img2.scale.x += 0.002f;
if (img2.scale.x > 2)
img2.scale.x = 1.0f;
}
}

Summarizing

So, in the end, we have a framework for writing games for Html5 / flash / android.
No no no! Everything is not very stable and works so badly. So far, only HTML5 works great and very fast. After all, it was not for nothing that he was demonstrated for so long on IO and Angry Birds wrote. This can not fail to please because writing html5 games on java is much more convenient for me than on js. Pleases only the very potential of future opportunities. And this potential can only be realized when working together on PlayN projects from Google and the Viper Engine (@Partysun).