Wloom - WebGl game, work in progress #7

WebGl game Wloom version 0.7 is here with following changes:

• Jump&run-gameplay is introduced.
• Core game abstraction. To ensure that the gameplay is working well and for better testing, the core game is a standalone module, which can be applied to different renderers. Wloom7 is essentially a webgl renderer for the core game. There is a second, very simple renderer, which displays the game as blocks on a canvas.
• The design of the npcs is inspired by Starcraft2-banelings.
• There are new sounds, made with sfxr.

►Youtube
►Start demo (Chrome 9+, Firefox 4+)
►Start simple core game canvas demo

Drawing with Java

For Wloom I needed a transparent radar background image. Since I am not used to a vector-paint-programm, I 'drew' the image with java, by programming following small program. At first it creates an image, then it draws the radar shapes and saves everything as transparent png. Ingame the radar will look like this.

import java.awt.*;

import java.awt.image.*;



public final class Drawer {

  public static void main(String [] args) {

    try {

    BufferedImage i=new BufferedImage(300,150,BufferedImage.TYPE_INT_ARGB);

    Graphics2D g=i.createGraphics();

    

    g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);

    

    g.setColor(new Color(0,0,0,100));

    g.fillArc(10,5,280,280,0,180);

    

    g.setColor(Color.black);

    g.setStroke(new BasicStroke(5,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    int r=140;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    g.drawLine(10,145,290,145);

    g.drawLine(150,5,150,145);

    g.setStroke(new BasicStroke(3,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    r=95;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    r=45;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    g.drawLine(51,46,150,145);

    g.drawLine(249,46,150,145);

    

    g.setColor(new Color(100,200,0));

    g.setStroke(new BasicStroke(3,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    g.drawArc(10,5,280,280,0,180);

    g.drawLine(10,145,290,145);

    g.drawLine(150,5,150,145);

    g.setStroke(new BasicStroke(2,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    r=95;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    r=45;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    g.drawLine(51,46,150,145);

    g.drawLine(249,46,150,145);

    

    g.dispose();

    javax.imageio.ImageIO.write(i,"png",new java.io.File("radar.png"));

    } catch (Exception e) { e.printStackTrace(); }

  }

}

Wloom - WebGl game, work in progress #6

WebGl game Wloom version 0.6 is here.

►Youtube
►Start demo (Chrome 9+, Firefox 4+)

Changes:

• New content: map and templar model
• Basic scripted cutscenes. They are defined in a external map-script-file (same as AI,...), thus dont strain game core.
• Minor changes, e.g. in previous version the whole map mesh was used for collision calculation. Now there is coarse collision mesh and a more fine-grained visible mesh.

Canvas experiment: Penrose Tiling

I experimented with an algorithm which generates a penrose tiling. This pattern consists of 2 tiles: and is non-periodic (never repeats itself).

►Start demo

The current algorithm is still suboptimal, there remain gaps in the pattern. The algorithm works as follows: Before a tile is added, the local neighborhood is checked for upcoming conflicts. Since only a local environment is checked, there can still emerge conflicts (gaps) for the global pattern. To improve the algorithm, one could introduce heuristics or make it interactive: a user could remove pattern areas which contain gaps. Then the generating could be restarted in this areas. (The demo is inspired by an article in the journal Spektrum d.W.)

Wloom - WebGl game, work in progress #5

WebGl game Wloom version 0.5 is here.

►Youtube
►Start demo (Chrome 9+, Firefox 4+)

Changes:

• Latest version of GLGE library and a new feature of it, shadows on direction lights, is used. The issue of previous Wloom version, where shadows didnt work with Firefox 4, is resolved.
• The Wloom demo this time is basically a complete game, where you can win or loose, with UI. The game logic is pacman-like: You have to collect gems, but must avoid monsters. This time isoperspective is used. Game logic and ai is loaded dynamically from an own script file. As result Wloom represents a flexible base for various kind of games. The UI is done via CSS and also completely from external scripts.
• A new rendering mode 'Magic3d' is added. With it the scene is drawn twice, side by side, with camera offset. Now, if you cross the eyes, scenes should appear in 3d. All in all there are now 3 rendering modes: Glge, Simple and Magic3d.

Andalusia pictures

Here are some pictures from recent vacation in Andalusia, Spain.

Canvas experiment: Build order simulator

The demo simulates build orders as of RTS games (e.g. Starcraft2). Here buildorders are very simplified, there is only 1 structure, the central; 2 unit types, worker and knight; and 1 resource, gold. To build those, gold must be paid. Workers harvest gold. Centrals produce units, the more centrals and gold exists, the faster units can be produced. The history of the build is displayed as graph. If the simulation is restarted, history graphs of previous runs are kept and displayed too, this allows to optimize a builder order.

Blog/Diary concept, notes on JEditorPane

For notes on projects and other stuff I'm working on a blog/diary application. As other blogs the app maintains entries, that can be marked with tags. In the following some concepts are described.

• 2 Renderers. Currently the blog has 2 renderers, which display the entries. Both are written in Java. The first ([1] in the picture) is completely self-written. Thus arbitrary concepts can be tested with this renderer, e.g. taglines (more about that below). The second renderer ([2] in the picture) uses html, which is displayed with the Java html component JEditorPane. This html frontend might be a starting point for a later online version of the blog.
• Sticky tags. For todo lists or important stuff to be rememberered always there are sticky entries ([3] in the picture). They are implemented using a 'Sticky' tag. The blog renderer draws all entries with a 'Sticky' tag highlighted and on top of other entries.
• Checkboxes. For todo-lists checkboxes in entries might be useful, that can be checked if a task is done ([4] in the picture). In this app checkboxes are implemented in the following way: The texts "[_]" and "[X]" within an entry make the blog-app render a unchecked/checked checkbox at this position within the text. If the checkbox is clicked the entry text is changed, "[_]" is replaced by "[X]", and a timestamp is added to the text. Clicking a checkbox thus is a special way of editing an entry. If the entry has a 'Todo' tag and if with a checkbox click all checkboxes of the entry are checked, the entry automatically looses the 'Todo' tag.
• Taglines. To visually distinguish entries of different topics (with different tags) there are taglines ([5] in the picture). This are lines between entries of specific tags with a special color for each tag. The tag-text is drawn besides the entry with the same color. The lines blend out if they are drawn behind entries that dont carry the tag of the line. An older version of taglines is described in this previous blogpost.

Some general notes on JEditorPane: This component is a part of the quite old Java Swing Api, hasnt changed in years and only supports Html 3.2. Nevertheless imho its a very useful lightweight html renderer (opposed to gecko/webkit bindings), useful for structured/formatted output or to render complex gui layouts. The standard approach to Gui layouts, LayoutManagers, is probably hard to implemented for this blog layout, with lots fonts, floating texts and tables.
JEditor renders html-checkboxes as Swing component JCheckbox. This checkboxes can be accessed via jEditorPane.getComponent(i). This will return a java.awt.Container whose first component is the checkbox:

JCheckbox jcb=(JCheckbox)((Container)jEditorPane.getComponent(i)).getComponent(0);

Now eg. listeners can be added to the Checkbox, that inform, if it is clicked. Following link helped to figure out checkbox access: http://www.thatsjava.com/java-swing/12595/

Wloom - WebGl game, work in progress #4

WebGl game Wloom version 0.4 is here.

►Youtube
►Start demo (Chrome 9+, Firefox 4+ shadows currently dont work with ff here, this is under investigation..)

New features:

• GLGE library use. With this lib better gfx is possible. The use of the library is optional and can be toggled with a checkbox. So there are now 2 selectable gfx passes, the feature-rich GLGE one and the simple original. Thus the game should run on fast and slow computers. Maintaining different gfx passes helps to isolate gfx logic from game logic and thus should result in better programmcode. With GLGE there are following new gfx features:
• Lights & shadows,
• Normal-, specular- and diffusemaps,
• Particle effects.

Wloom - WebGl game, work in progress #3

Finally there is a new version of the WebGl game Wloom.

►Youtube
►Start demo (Firefox 4+, Chrome 9+)

Following new features:

• Skybox (the one I wrote about in a previous blogpost)
• New map with hills and a tunnel
• Map reiterates infinitely, thus the world does not end :)
• Basic ai (npcs move away, if they are near another character)
• Attack (key E), experimental fly mode (key N)

Starcraft 2 casts

In the last weeks I did spend some time watching Starcraft2 casts. I find them very entertaining to watch and they teach you to play. On the other hand watching alot casts is very time consuming. With this blogpost I will give an overview of my favorite casts. Following table contains name, url, unique features and, if existing, the main fraction and league-level the caster is playing. Because I watched casts only for the last weeks, the data assembled below might be incomplete or partly wrong. In this case please notify me and I will update things.

	Notes	Fraction/League
Psy	Partly very funny.	Zerg/Master
HD	Basically awesome.	Zerg/Master
TotalHalibut	British accent. Partly very funny. Also other games like WoW.	Terran/Silver
Husky	Reference. Different game-styles (e.g. 4v4).	Protoss/~Diamond
Day9	Reference. Focus on in-depth (but also time consuming) analysis.
Ahnaris	Basically awesome.	Terran/Gold
Destiny	Very funny.	Zerg/Master
Gom Tv	Great GSL pro games. Login (e.g. via Twitter), partly free to watch.

Btw, the work on a new version of the WebGl game Wloom is almost finished. Thus there will be a new demo in a couple of days on this blog.

Skybox algorithm

For the Wloom project a skybox was needed. A skybox is a large box around a scene, with sky texture. The textures of the 6 planes of the box can be calculated from a single picture.

The algorithm for this transformation is outlined as follows: For every texture point of the box-planes calculate two angles relative to the center of the box: a horizontal angle ax, where value 0 represents north, PI/2 east, PI south and 3PI/2 west; and a vertical angle ay, with a range from value 0 (=top) to PI (=bottom). From the original picture the color at the coordinates of the two angles is now taken and drawn towards the texture-point of the box-plane. Below the exact algorithm, written in Java, is listed.

for (int y=0;y<=w;y++) 
for (int x=0;x<=w;x++) {
  double xh=x-w*0.5;
  double lh=w*0.5;
  double ax=PI/4+Math.atan2(xh,lh);
  double ay=Math.atan2(Math.sqrt(xh*xh+lh*lh),-y+lh);
  b.setRGB(x,y+w,getRGB(ax*biw/(PI*2),ay*bih/PI));
  b.setRGB(x+w*2,y+w,getRGB((ax+PI)*biw/(PI*2),ay*bih/PI));
  
  ax=PI/4+Math.atan2(lh,-x+lh);
  b.setRGB(x+w,y+w,getRGB(ax*biw/(PI*2),ay*bih/PI));
  b.setRGB(x+w*2,y+w*2,getRGB((ax+PI)*(biw-0.5)/(PI*2),ay*bih/PI));
  
  double yh=y-lh;
  ax=3*PI/4+Math.atan2(xh,yh);
  ay=PI/2-Math.atan2(lh,Math.sqrt(xh*xh+yh*yh));
  b.setRGB(x+w,y,getRGB(ax*biw/(PI*2),ay*bih/PI));
  ax-=PI/2;
  b.setRGB(x+w,y+w*2,getRGB(biw-1-ax*biw/(PI*2),bih-1-ay*bih/PI));
}

The shown skybox is used in the next version of the WebGL game Wloom, which will be posted soon.

Wloom - WebGl game, work in progress #2

There is some progress with the webgl game 'Wloom'. Current state of the project can be seen in the video or as running demo here (needs Chrome 9+, Firefox 4+). Following features have been added since the last blogpost:

• Dynamic camera (e.g. in small rooms camera moves closer, so that the view is not clipped)
• Map and model data are loaded from external files. Its format is javascript, they are loaded with dynamically added script tags.
• Html audio. Currently it sounds on my pc with chrome 9 abit buggy (it seems some samples are not played and chrome crashes after some time). With Firefox 4 beta 6 sound works better here.
• Npc scripting with javascript. Since core game and npc scripts are written in the same language, javascript, integration is straightforward and simple. The code can be stored in map- or model-files.

Soon there will be updates on the project. Map(s) and gameplay shall be improved. :)