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/