Archive for January, 2010

Game progress recap

Saturday, January 2nd, 2010

I’ve been blog-lazy about the game, so here is a small recap of what’s been going on on my screen lately:

Milestone #0 was getting something on the screen:

Milestone #1: level loading, animated coins and traps, movable objects

wip_20090703 The strange platforms on the left actually let you jump higher!

Milestone #2: rotating platforms, engines and vehicles:

wip_20090805 wip_20100102

Milestone #3 is buttons and triggers. Since a single picture wouldn’t explain how they work well enough, what about a short video? I also added a small vehicles demonstration at the end because, well, they are just cool 🙂

Resolving CSS imports with CssCombine

Friday, January 1st, 2010

When designing websites, I usually write multiple stylesheets for multiple parts of the website. For example, for I had 5 different stylesheets:

  1. header.css for the header/logo area,
  2. content.css for the content area,
  3. sidebar.css for the sidebar,
  4. footer.css for the footer
  5. and finally theme.css, that includes the style for all the above:

    @import url("header.css"); @import url("sidebars.css"); @import url("content.css"); @import url("footer.css");

On more complex projects, I usually have even more stylesheets. One thing I am usually constant about however is having a generic theme.css or style.css that includes the other files. This is convenient because in my HTML pages I just have to link only one stylesheet file.

This technique works really well when testing the website on my local machine, however in production it has the downside of generating multiple requests on the client.

To address this problem, I wrote a small command-line program that would follow @import instructions and merge the imported files in the main one. It’s called CssCombine.

The code (in c#) is merely 48 lines long:

using System; using System.Collections.Generic; using System.Text; using System.Text.RegularExpressions; namespace CssCombine { class Program { static void Combine(string parFileName, StringBuilder parOutput) { string[] lines = System.IO.File.ReadAllLines(parFileName); foreach (string s in lines) { if (s.Trim() != "") { Regex rgx = new Regex(@"@import\s+url\s*\((.*)\);", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant); string[] sx = rgx.Split(s); if (sx.Length > 1) { string sFile = sx[1].Replace("\"", "").Replace("'", ""); sFile = System.IO.Path.Combine(System.IO.Path.GetDirectoryName(parFileName), sFile); Combine(sFile, parOutput); } else { parOutput.AppendLine(s.Trim()); } } } } static void Main(string[] args) { if (args.Length != 2) { Console.WriteLine("Usage: CssCombine [input.css] [output.css]"); } else { string input = args[0]; string output = args[1]; StringBuilder sbOutput = new StringBuilder(); Combine(input, sbOutput); System.IO.File.WriteAllText(output, sbOutput.ToString()); } } } }

Or you can download the compiled program here.

Another optimization would be to minify the resulting file. I use Yahoo’s YUI Compressor for that.