Wloom - WebGl game, work in progress

Currently I work on a game for WebGL named 'Wloom'. It shall be fastpaced, from egoperspective, with walkable architecture, maybe an egoshooter. Initially i wanted to call it 'Gloom', but that is taken by an amiga game. So in 'Wloom' the 'Wl' is short for WebGL, 'oom' is a reminiscence to another great game. :) On the right is a video of the current state. You can test the game (with a webgl-capable browser) here. Currently you can only run around with a protagonist and watch the map. Main controls are w,a,s,d,left,right, you can also look around with mouse drag. The WebGL-canvas automatically resizes with the browser, thus the game may run fullscreen.

With this I wish the visitors of this blog Merry Christmas and a Happy New Year. Updates on this and other projects will be posted soon, but probably not before 2011.

CanvasCraft - towards a web RTS game (²)

A previous blogpost is also transcribed with 'towards a web RTS game'. There I focussed on webgl graphics. This time the focus is the game core engine, thus here graphics are very simple, units are drawn as circles using canvas. Conceptually, once the game core engine is finished, one could combine both approaches and get a game demo with improved gameplay and graphics.

In this demo units can be selected via mouseclick, by mouse-dragging a rectangle around some, or via numeric keys (e.g. shift-1 constitutes a group of previous selected units, key 1 then selects this group). Selected units can be moved by rightclicking on the ground or on another unit. By pressing key P the game pauses.

There are units of 2 different parties (blue-you/orange-computer). If units of different parties approach they will fight each other. There are 2 unit-types: slow ranged and fast melee. The game is over, if all units of a party are gone. The filesize of the javascript code is ~12kB.

A lazy defensive terran strategy for Starcraft2

In this blogpost I describe, how I play Terran in Starcraft2 Multiplayer. The strategy is defensive, this way I try to avoid micromanagement, which I'm too slow for. When I last looked, my average APM (action per minute) was about 20. Battlecruisers play a big role, but also infantry. At first I summarize the strategy, then I describe some detail aspects.

Summary:

• Beginning build order: Scv, Scv, Supply depot, Scv, Barracks, Scv, Barracks, then Marines
• Built up infantry (about 10 marines, 8 marauders) as defense. Make the infantry short-key 2. Besides constantly make Scv, Supply depots as needed, 2 Turrets around the Command center. Dont build too much Turrets, since fleet should do anti-air tasks soon.
• Build Planetary fortress, a Starport, start building a fleet (a raven and some vikings) and make it shortcut 1.
• Build a 2nd Command center, together with each base build 2 Turrets, 2 Refineries, and later Planetary fortress. Build up fleet (vikings, maybe few banshees, battlecruisers), level up fleet to the max (with 2 armories) Build about 5 Starports.
• Build maybe 2 more expansions or more. Probably meet enemy, attack with fleet and infantry (key 1 and 2). If you have battlecruisers, attack as much with yamato cannon as possible, (this is almost the only micromanagement needed). If fleet is crushed, rebuild quick.
• Hopefully defeat enemy.

Detail aspects:

• Often the enemy attacks early, then try to have a good infantry built up, keep infantry and fleet near the Turrets and Planetary fortress, so that they defend together, and very important: make some Scv's repair Planetary fortress during attack.
• Thors: In the beginning I tried to attack with Thors. But they couldnt move everywhere like air units can, so I dont use them.
• Make sure you have detectors. 2 Turrets for each base and Raven in the fleet.
• Bunkers: In my first games my intial defense was too weak. First I tried to put the Marines into Bunkers, now I just build Marines more quickly with 2 Barracks and dont use bunkers.
• Once I attacked enemy with medium fleet, made some damage but lost fleet, couldnt rebuild quick, lost game. Thus, attack only with maximum unit count and max upgraded. Make sure there are enough Starports and resources for quick fleet rebuild.
• Sensor towers: I am not sure, if they are good. For the first base I usually build one. You see sooner, when the enemy attacks, and have more time to position fleet and infantry for the battle. On the other side from the towers the enemy knows your positions and might attack earlier.
• Only build banshees in the beginning or when you have few resources, otherwise build Battlecruisers for ground and air defense.

Html Twitter control (public tweets, no auth)

I plan to work on a Twitter client for Javascript. The client should display tweets very compact and might have some features of a Java Twitter client, I blogged about previously.

This tweet component is a first step. It shows the user-timeline of a given user plus tweets that the user replied to. It shows only public tweets, thus no auth is needed. You can enter another user to display its tweets, but the users tweets muts be unprotected, otherwise the tweets wouldnt be visible without auth.

Next step towards a client would be to figure out, how the auth stuff works, which looks somewhat complicated.. x) More infos about that probably soon in this blog.

Div sparks - Html decoration

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisici elit

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

On the right is a Div-spark example shown, demonstrating a decoration for Html-DOM-elements. This might be used to indicate that data is generated or just for esthetic reason. :) Technically div-elements are dynamically generated via javascript, with flashing background colors. The appearance of this div-elements, the "div-sparks", is defined by following structure:

var data=[
  {t:50,  r:0,g:250,b:0,a:1 },
  {t:200, r:0,g:0,  b:0,a:0 ,spawn:1},
  {t:0,   r:0,g:250,b:0,a:0 }
];

where "t" stands for a duration, "r,g,b,a" define a color and the "spawn" flag starts creation of new sparks beside a current element.

WebGL/bullet.js Demo

The demo shows two characters, the left is calculated using the physics library bullet.js, the right without physics. You can toggle the use of physics with a checkbox. On my Pc I get following framerates:

	with physics	without physics
Chrome 8	19 fps	59 fps
Firefox 4 beta 6	~17 fps (heavily varying)	60 fps

Its interesting, that there isnt the performance gap between Chrome and Firefox, that was observed in an earlier blogpost, anymore. The reason are improved javascript engines and webgl- instead of software-canvas output. Though the Firefox physics performance varies heavily (sometimes drops to 3fps), probably because of background optimizations, while Chrome display is smooth.

Update: bullet.js, together with this and 2 Canvas demos, is now also available here: http://code.google.com/p/bulletjs/

HistoryMaps: Migration period (Völkerwanderung) 150-500

On the left there is a first version of a HistoryMap. HistoryMaps are a concept to display historic developments, both in place and time. They combine traditional maps, which display places but no different times, and timelines, which show timepoints but no referring places. This first HistoryMap shows movement of tribes and battles during the migration period (Völkerwanderung) 150-500. Below the properties of HistoryMaps and its GUI are described in detail:

• Shapes and timeline: The content of HistoryMaps is made up of shapes (in this example there are bezier-curved shapes which represent tribes), which may be morphed between time-keyframes. The time is displayed in the upper timeline, a current time is highlighted. You can click or drag with the mouse the timeline to set the current time, the shapes will be morphed according to this time. Thus you can explore historic constellations at different times.
• Eventpoints: In addition to shapes there are eventpoints displayed, marking historic events (here battles). Eventpoints are drawn together with their corresponding times. If you move the mouse over a point additional information for that event is displayed. If you click an event point, the current time will be set to the corresponding time. Thus you see the global historic context of the event. This marks a virtue of the concept: In usual historic maps events are mostly drawn only with local context.
• Animation: At startup and when you click the animation-button an animation is running, where current time moves over the timeline. This gives an overview of the history shown.
• Timecolumns: When you click the timecolumn-button a static display is shown, where the shapes are drawn in columns of different times. Thus you see a picture of the historic content of all times at once. This gives insights on durations of historic developments, one can distinguish short processes that only appear in few columns from longlasting ones that are drawn in more columns.
• Completeness: HistoryMaps may display the complete history of all places and all times. For this the current programm must be extended with zoom facility. Thus you could zoom in and out places (like GoogleMaps) and you could also zoom within the timeline to set a time frame of interest.

Canvas graph demo, Usecase: Football results

FC Hansa Rostock
Kickers Offenbach
Wacker Burghausen

St. Pauli
HSV
FC Bayern München

On the left there is a interactive canvas graph demo, showing football results. You can switch highlighted graphs by mouse-clicking on the corresponding description. Since all the javascript is written in one line, all content of this blogpost could be uploaded to blogspot, there is no iframe needed here. Soon there will be a more advanced canvas demo and I'm also working on a webgl+bullet.js demo. Stay tuned! :)
Update: I made the graphs animate and added functionality: If the mouse moves over the graph, detail information is displayed.

Twitter client concept: Refer arcs

In my current twitter client, to follow conversations between users, I often have to scroll and search to find the corresponding tweets. To make this process more comfortable (especially the search part), I introduced refer arcs into a twitter client which visually connect tweets that probably refer to each other (replies, retweets).
On the right there is an animated gif, which demonstrates this technique. The updated twitter client ('Twaja') will be downloadable soon.

Thoughts on other stuff. Three recent (in my opinion) questionable developments in computation:

• Oracle sues Google over Java. Obviously the new owner has other priorities then the old one. Java might loose people working with it.
• Google and Verizon propose new policy to constrict net-neutrality. This might be a step toward the end of the open net.
• Google stops Google Wave. After just a year this innovative project is canceled. Thats quite few patience, reminds of canceled Google Lively.

End of rant. :)

What I like about Javascript (compared to Java)

This list was assembled, while I was coding some Javascript projects (see blogposts below), and is of course only a subjective view:

• dynamic typing: simpler declarations, no casts, no interfaces, less keywords, simpler syntax (but I see possible drawbacks: its may be more error prone, and probably less runtime performant)
• "this" is mandatory to access object-variables, in java its optional. This is more clear semantics and promotes the use of local variables.
• simple and powerfull Array and Hashtable (instead of Java's multitude of Array,Vector,List,Collections..)
• prototype based object system. its more flexible than javas class based system, e.g. you can add methods to existing objects.
• last but not least: it runs everywhere in the browser, quite like java, but in a more straightforward and powerfull way (direct dom access, not like a plugin).

Still, Java keeps being great, but above points make Javascript very much interesting, imho.

bullet.js - Javascript Ragdoll Physics

I ported more classes from JBullet to Javascript Physics engine bullet.js, wrote some new and assembled a new canvas demo showing javascript ragdoll physics: Click. Now almost all classes from JBullet are ported, except some for vehicle physics. The size of bullet.js is now about 330kB. The demo shows on my pc using Chrome ca. 40fps. The current drawing (software 3d using canvas) is not very performant, so soon there will be bullet.js+WebGl demos.

bullet.js - Javascript Physics Engine

I finished porting parts of the JBullet and Vecmath library from Java to Javascript. As the result there is another 3D Physics Engine for Javascript named bullet.js (because its based on the Bullet Physics Engine). Its size is about 200kB. Here is a canvas-demo, showing the engine in action. The demo consists of the same animation with 20 boxes as the java physics demo, I posted before. Thus one can compare the different performances. On my computer I get following frames per second:

• Java: 300 Fps
• Javascript Chrome: 45 Fps
• Javascript Firefox 4b1: 10 Fps
• Javascript Firefox 3.6: 3 Fps

This shows 2 points. Point 1: Google Javascript is quite performant, Mozilla must still improve things. Point 2: Although Javascript execution speed has great improved in the last years, there is still a big performance gap wrt. Java. Maybe javascript will never run as fast as java, because of its dynamic nature/typing? Time will tell. :)
Anyways, currently there is a canvas demo, but the real purpose of a 3d javascript physics engine would be WebGl. So there will be WebGL demos soon on this blog.
A issue exists with the javascript port: the boxes in the demo sometimes show strange behavior, they bump from the ground and fly through the air.. In the java demo they dont do that, so there must be a bug in the Javascript code. If there is someone who actually understands how the bullet engine works (I dont, I just ported it :) it would be nice, if I get help to find the bug.

WebGL demo: normalmaps, shadows, scripting

The demo uses the glge-library and shows

• normalmapping,
• shadows and
• scripted lights and animation

for WebGL. The building is inspired by a church in Schwerin.

Java Physics Demo: Boxes

Start applet.

This demo uses parts of the the JBullet and the Vecmath library. I extracted essential classes and put them all into 1 java source file. Thus this demo dont needs external libraries.

On Objectstacks
I also changed the used JBullet parts, so that they dont use Objectstacks. Objectstacks were introduced to manage temporary objects in a threadsafe way. There are 3 possibilities to deal with temporary objects:

• 1) Just instantiate a temporary object as you need it. Problem: this can result in a lot instantiated objects, garbage collector has alot todo, runtime performance might drop. Though, intelligent jit-compilers could possibly handle multiply temporary instantiations and could in a way inline them..
  
• 2) Add (private) auxiliary objectvariables to the class. You can use this objects in computation and dont need to instantiate new ones. Problem: if different threads invoke the same method at the same time, an object could be used twice, with unexpected results. This approach is not thread-safe.
  
• 3) Use objectstacks. Retrieve auxiliary objects from a pool and return them to the pool, when computation is over. This way in most cases only limited number of instantitions is needed (opposed to possibly unlimited instantiations in approach 1) and this method is threadsafe (opposed to approach 2).

The original JBullet library uses objectstacks. In this demo I omitted them, because the original approach requires an instrumentation step in the build process. During this step auxiliary classes are generated using an ant-build-file. A simple compile doesnt work. For sake of simplicity I thus dont use objectstacks here, but above second technique. Thus this demo is not thread-safe, but its usecase is only single threaded, so it doesnt matter.

How to build

• Make sure, that a JDK is installed.
  
• Put the source file into a directory 'net/plsw/bullet'.
  
• Compile it with 'javac net/plsw/bullet/BoxDemo.java'.
  
• Run it with 'java net.plsw.bullet.BoxDemo'.

Canvas Game Demo: 4Rumble

As a small project besides a more complex 3d-project (soon more infos here) i wrote this game demo for canvas and javascript. Its a remake of a flash game demo, named 4Rumble (click, click), i made a while back. In this Javascript demo there is currently only one character, Cursor-Left/Right make him run around. Cursor-Up/Down zooms in and out. A formerly flash demo ported to javascript, might be seen as statement in the current html5-instead-of-flash debate. Which leads to:

Others stuff ramblings
My opinion about the Apple/Html5 vs. Flash debate (click, click): I dont have much to do with apple and i dont have much todo with flash. So im not directly affected. Obviously, Html5 is more open and accessible, than flash, so I love to see it gain ground. On the other side I strongly dislike vendor-lockin on Iphone (and elsewhere, e.g. linux-ban on ps3). It kills creativity, the user should have the choice between different technologies. If native apps are better than those (compiled) with intermediate code, they will supersede naturally other apps. There is no need for prohibition. If apple would allow flash (or more importantly imo: java) on its devices, I maybe also wanted to have one. :)
And now for sth. completely different: Google makes O3d a WebGl-Javascript-library, the plugin-development is stopped. This is imo a good step since with WebGl there wont be a need for a browser-3D-plugin. Though, WebGl doesnt currently run everywhere (i.e. on i.e.), but according to google the plugin will still be available for at least a year.

Work in progress: Twaja, Doom3 experiments

Experimenting with trees and fog and the doom3 engine. The aim is to create a spooky single player level. The created content might be reused for other projects.
A second work in progress is Twaja, the Java Twitter Client. I updated the layout and introduced the top control area. Friend feed clustering is improved, so that successive tweets from the same source are displayed together. Thus the profile icon is only displayed once, and messages are shown more compact. More updates on these projects soon!

Btw, congratulations @cern for the first 7TeV collisions and the beginning of the experiments. Now I must read more on particle physics to understand upcoming, hopefully interesting, results. There are nice live data animation websites on the current lhc-status: click, click.

Does bytecode become obsolete?

Or, more provocative: Will Javascript substitute Java? Java has a certain technical infrastructure, it utilizes bytecode. This exists for following reasons: In the history of programming languages at first there where interpreted languages, e.g. Lisp or Basic. They where slow but portable. Then there came languages like c and c++, where source is compiled to systemspecifc binary. They were fast, but unportable. With Java and bytecode a quite fast AND portable solution emerged. Java source is compiled to system-independent bytecode, which then is executed by the java virtual machine. With later versions of Java, to increase execution speed, just-in-time (jit) compilers were introduced. They compile the bytecode on the fly to systemspecific binary, which than runs faster. Besides the ecosystems of compiled languages, interpreted languages persisted. Script languages like Javascript are there to e.g. control compiled programms or bytecode.

Recently jit-compilers for javascript appeared (Google V8, Mozilla Tracemonkey). Thus Javascript becomes fast and portable, like java, but without bytecode. Bytecode now seems to be an unnessary intermediate step during programm execution. Bytecode means more complexity in IDEs and in language execution. If a jit-compiler works with sourcecode directly, not with bytecode, possibly more optimizations can be done (without the additional abstraction step bytecode). If you get the same results with a less complex solution, you should apply it. With faster script languages, also there will be no need to separate programm logic into scripts and compiled functions. One advantage of bytecode might be that you can have different programming language compiled to it and than be executed on the same virtual machine. Like with JRuby, Jython, Scala than run on the java virtual machine. If you ommit bytecode and want to have the same flexibilty, the execution engine (with the jit-compiler), must be able to read different types of languages. Future will show if that is feasible.

Aside from the technical aspect, lets look at usage fields of Java and Javascript. At first Java was meant to be for the desktop. This didnt fully work out, e.g. Java applets in general couldnt compete with alternative approaches like flash. Java though became very strong on the server. Javascript was also originally there for the desktop, with its improving performance and the new <canvas> html-tag it can increasingly compete with flash and java applets. As of lateley Javascript spread also to the server (e.g. node.js). Thus, also from this point of view, it seems, that Javascript pushes into Java territory.

Two final notes: First, you may replace the term 'java' with 'c#/.net' (or other bytecode/intermediate language platforms) in this text. Second, this considerations only apply to the far future, currently java cannot be replaced by javascript, because of its superior stability, performance, distribution and api. Also, different languages/platforms will stay (in niches). In my perception java/c# (also called managed code) superseded c++ (unmanaged code), yet c++ still exists. In a comparable manner Javascript will displace Java/C#, but all will stay (for now).

Towards a Web-RTS-Game

Here is a demo for a real-time-strategy (RTS) game using WebGL. Currently there is only very basic gameplay: you can select units using left mouse button and let them move around with the right mouse button. Following is planned for future releases:

• Map and gameplay enhancements. Add strategy to the real-time
• Use of other html5 techniques, e.g. audio-tag for audio, websockets for multiplayer gameplay
• Custom content creation and modification. Users will be able to upload own units and maps to a central repository. Also AI of units might be controlled by editable user-scripts...

Back from Cebu, Html5 game Sungka

I'm back from vacation. It was a very nice trip, here are three recommendations: Alta Cebu Resort - very nice place with internet and pool, Qatar Airways - tasty food, free beer and whiskey , Warped Passages - interesting book on particle physics, maybe a good read to understand coming LHC-experiments.

Working on new content: Games for Html5 (Canvas and/or WebGL). A first start is a implementation of the game Sungka using Javascript and Canvas (overall size 3.5kB). You can play it directly in the right field above. Currently it wont run on IE, only with e.g. firefox and chrome.

Html5-Canvas with variable size

I tried to make a Html-page with a Canvas-element, which fills the whole page or browser window. Following line

<canvas width="100%" height="100%">

didnt work. It produced a canvas with a dimension of 100x100 pixels. Following

<canvas style="width:100%;height:100%" width="100%" height="100%">

worked a bit better: the canvas filled the browser window. Though the canvas still had a size of 100x100 pixels, but it was scaled up to fit the page. To have a canvas that dynamically changes its size according to the browser window, I had to set canvas.width and .height manually, like in this code snippet:

var cont=canvas.parentNode;
if ((canvas.width!=cont.clientWidth)||(canvas.height!=cont.clientHeight)) {
  canvas.width=cont.clientWidth;
  canvas.height=cont.clientHeight;}

Note: by setting e.g. canvas.width the canvas will be cleared, so the resize must take place before the repaint.

Update: If the canvas is used with WebGL, the gl-viewport must be set to the new size.

gl.viewport(0,0,canvas.width,canvas.height);

WebGL skeletal animation demo

Click here to see it (you need a webgl-enabled browser). This WebGL-demo runs completely without external javascript libraries. All code (incl some basic matrix-computation-routines), mesh and animation data is stored within the Html file, only the Texture is loaded from an external Jpg. The demo is similar to the previous for O3D (here), but there I use external libraries.

Twaja 1.0.8 Release

A first version of the java twitter client Twaja is available for download here. There are binaries and sources. Twaja may also run as applet or via Webstart.
Comments and critics appreciated.

New project "Twaja"

Im working on a new project named Twaja. It will be a Twitter-client written in Java. The name is based on the words 'Twitter' and 'Java' and means 'Your' in russian.

There are a lot of twitterclients available, is there a need for another one? I currently use Echofon, which is comfortable and fast, but lacks some features I'd like to use. On the other hand there are other, more complex clients with more features, but they usually have a large footprint. Basically I havent found the ideal client for me, so I started to write an own. It will have the features, which I find important and it will have a small footprint.

It will be written in Java and will use the small jTwitter-api. It thus might run as an applet within a Website, but most likely as an Desktop-application (using Java Webstart). The Gui will not be based on Swing or SWT, but only on AWT, which has the smallest footprint. Here are some characterics and proposed unique features of Twaja:

• Combine friends feed and search. While I like to follow tweets of my friends I sometimes also want to follow tweets regarding certains topics from everybody, which can be found through twitter-search, e.g. using tags. The client will be able to display both, friend feeds and search results in an equal way.
• Ranking. Sometimes, when I was offline for a while, there are hundreds of unred tweets, which are uncomfortable to browse. There should be a form of ranking in the client, so that you e.g. can read tweets only from 'important' users..
• Innovative display. I will try to implement some new display ideas. E.g. tweets with tags may be displayed grouped with Taglines. Thus one can easy distinguish between tweets of different topics. I wrote about the concept of taglines here.

Soon there will be more screenshots and infos available on Twaja. Stay tuned! :)

O3D demo with skeletal animation

This demo shows skeletal, key-frame-based animation with Google O3D. All mesh- and animation data is stored within a html-file (~60kB) and processed via javascript. Only the texture is loaded from an jpg-file.