Java, WebGL and cross-platform game development


Web browsers are probably the most widely used software in desktops and mobile computers. They have become the swiss army knife of the Web 2.0 digital world and it is under this context that a Javascript API for rendering GPU-based graphics was born: WebGL.

Long live Java

The WebGL technology enables rendering complex 3D or 2D scenes such as games within your browser. You could write the next Angry Birds in javascript and WebGL. But why not leverage the power of existing Java technologies and write your game in Java using WebGL? Yes! You can write Java code and deploy it on the web as javascript thanks to the help of the Google Webtoolkit. (If you haven’t tried it, then you should!).

The following web app illustrates how easily Java and WebGL can be used together with Libgdx game development framework to create fancy 3D scenes.

Click on the image to see the webGL app. Note: you’ll need a WebGL compatible browser such as Firefox or Chrome.

Teddy bear

A screenshot of the webGL application.

Instructions: use the arrow keys to move the camera and drag the mouse to rotate the camera.

Notes about the code

  1. The code uses WebGL which is pretty much OpenGL ES 2.0.
  2. The sky and mountains background texture (a.k.a Skybox) are rendered using cube mapping and custom shaders.
  3. There is one shader program for rendering the water which is based on the excellent Jay Conrod’s water simulation shader. The water looks jaggy because there aren’t many triangles in the model. Feel free to change this.
  4. The boat 3D model comes from here and the texture from here.
  5. The teddy bear comes from here (if you know the original source, let me know).
  6. All models were exported to G3DT format using blender.

NB. The code will be available on github in the coming days.

Edit: The code is available here:

Cross-platform game development

The holly grail of developers is to code once and run everywhere. Unfortunately, this is hardly true as platforms are extremely different from each other. Furthermore, screen sizes and input devices are not the same. Nevertheless, the Java ecosystem provides great multi platform support out of the box. Add GWT and Monotouch to the mix and you’ll support Mac, Windows, Linux, Android, HTML5 and iOS from day one. Check the following cross-platform gaming frameworks to see how it can be done: PlayN and Libgdx.

Phiball, the game

Born as an informatics project, a new game has arrived: Phiball.

It’s the result of the work and effort of a very active and motivated team.

The game is in fact a mix of the classic Brick Breaker game with sophisticated physics and ‘à la Mario’ stars. It’s a java based game and uses pulpcore and jbox2d under the hood.

Try to reach all the stars in each of the 10 levels by shooting the canon. Hint: you can change the ball’s impulse by varying the time you press the left mouse button.

Tell us what you think !

You can play it online here.

Your first SFML game, Part IV: The main loop

We already had a main loop for our game, but it didn’t to anything:D.
Here we’ll modify it to make it work with our board and our userInterface.

We keep the usual SFML headers, and we add our custom classes:

// main.cpp
#include <SFML/Graphics.hpp>
#include "board.h"
#include "uInterface.h"

We create the window and we add a frame rate limit. By The Way if you don’t want to use anti aliasing replace the appropriate lines of code :

Continue reading

Your first SFML game, Part III: The User Interface

We already have a fully working game. But… we can’t play it yet!! We have to decide how the game should work with the player… Well, I’ve already decided it for you 😀
When the player clicks a column, it will try to add a token.
If the column has no more empty spaces, the player should retry in another column.
When a player has won, or the board is full. A click on the screen will restart the game. You can play again 😉

To do these, we’ll have a class that will interact with the players.

We include board.h because we’re using the board within the userInterface class:

// uInterface.h

#ifndef UI
#define UI

#include "board.h"

Continue reading

Your first SFML game, Part II : The board

Hello reader!

In this post we’re creating the necessary code to display the  game’s board. It should be very easy to understand, so if you have any problems or suggestions please make a comment.

The main loop :

// main.cpp
#include <SFML/Graphics.hpp>
#include "board.h"

int main()
    // Create main window, using the best available resolution
    sf::RenderWindow App(sf::VideoMode::GetMode(0),
            "Your first SFML game: 4 in a row!");

    // Reduce CPU usage by limiting the times a frame
    // is drawn per second

    // This is the main loop
    // It will loop until you exit the program
    while (App.IsOpened())
        // Here we process the events list
        sf::Event Event;
        while (App.GetEvent(Event))
            // Close window : exit
            if (Event.Type == sf::Event::Closed)

        // Clear the screen with a color

        // Here you will draw all stuff in the frame buffer

        // Render the frame on screen

    return EXIT_SUCCESS;

If you compile this code, it will create a black window. This is the base of our code.

Continue reading

Your first SFML game, Part I : Introduction

Have you ever thought about creating you’re own super classic mario game, or you’re own zelda series? Well, you’re dream has come true… with SFML you’re about to create you’re first game!! To make it easy I’ve chosen to recreate the well-known game Connect Four. Ready??… Go!!

Before starting the game development be sure to have :

Let the coding start!!

There are two main ways of creating this type  of games (board games).

  • By drawing directly to the screen the components of the game (circles, lines, rectangles, etc).
  • or, By using textures (images) and placing them on screen.

For the sake of this example, we’re using the first approach. We’ll be drawing a background color with circles. Three kinds of circles will make the whole : empty spaces, red tokens and yellow tokens. The outline of a winner combination (4 in a row) will be highlighted.

In the end, we’ll have a game like this:


Here you’ll find the Windows executable.
And here the complete sources, including a Code::Blocks Project.

The sourcecode is released under the zlib/png license.

To be continued…

Why SFML Rocks and why you should use it

SFML is a recent open source multimedia library developed by Laurent Gomila which is a SDL direct replacement. SFML is multiplatform ready. It provides easy acces to graphics, input devices, sound, network and lots of  stuff that will do your programming tasks much eaisier and fun to code.

SFML is targeted mainly to game developers, but any kind of multimedia software can easily be done with this library.

What kind of stuff can SFML do? Visit this forum to find out cool creations, games and projects. You’ll be impressed.

Continue reading