Long live Java
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.
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
- The code uses WebGL which is pretty much OpenGL ES 2.0.
- The sky and mountains background texture (a.k.a Skybox) are rendered using cube mapping and custom shaders.
- 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.
- The boat 3D model comes from here and the texture from here.
- The teddy bear comes from here (if you know the original source, let me know).
- 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: https://github.com/recastrodiaz/java-webgl
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.
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:
#include <sfml /Graphics.hpp>
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 :
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:
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 :
#include <sfml /Graphics.hpp>
// Create main window, using the best available resolution
"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
// Here we process the events list
// 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
If you compile this code, it will create a black window. This is the base of our code.
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…