The History of Light - Main Menu

The History of Light is a Lights Out-type of puzzle game: There is a grid of lights that are either on or off and your goal is to switch them all off. Clicking on a single tile will toggle it, and its adjacent tiles, on or off.

There are five worlds in The History of Light, each with 20 levels and a new unique mechanic. On the second world for example, the player is introduced to the concept of bombs. In addition, the last 8 levels of each world has a bigger grid.

The game was developed by me and Dimitris Xanthopoulos. Audio was provided (with permission) by Brandon Morris, Louis Hostos and various other artists found at OpenGameArt.org.

The game is currently available at the Ovi store and its official website is http://pekalicious.com/thehistoryoflight.

Post Mortem

While the development of the game took us less than a week (what with Dimitris learning QML and me learning C++) I kept tweaking and refining it until I felt comfortable enough to release it. However, I spent most of the time on the interface rather than the level design which, I believe, will cost me a lot of downloads. I have already got some feedback from some friends and I plan on working on them in the next couple of weeks.

One of the biggest things that didn’t get to the release was music. The game has one track for the menu and one when playing a level. My initial design was one track for each world from the very talented people at OpenGameArt. Unfortunately, the size of the game leaped from 5MB to more than 15MB. I believe that 15MB is not an acceptable size for a mobile game, so I had to cut it down. I’m thinking of making a “Director’s cut” edition of the game with full audio. At least that way the player will have a choice of the size of download.

Finally, let’s talk about the elephant in the room: The Ovi Store. I know that, in this day and age, with iOS and Android being the center of everything, many will wonder why we chose the Ovi Store. iOS was an easy decision; the cost was simply too high: buying a Mac, an iPhone, creating an iOS account etc, etc. Android vs Ovi Store needed a little more thinking. I have a good background in Java but nothing in C++ while Dimitris has a good background in C++ but no Java. Both of us didn’t have any experience in Android Development or Symbian, so, as far as development time went, they where both the same. It all came down to competition: Android has A LOT of competition compared to Ovi. A friend of Dimitris had previously released a couple of Symbian apps and he provided some good insights on how his apps went. So we went for Ovi after that.

Developing for Symbian had many hiccups. Especially in the audio department. It took me about two weeks to figure out how to fade in/fade out the background music and play sound effects. I finally came with a work around, but I didn’t like it at all.

There is another platform out there that I would really like to work on: Windows Phone 7. Especially because I am already working on an XNA game which is supported (with some limitations) on the platform. We’ll see. For the mean time, have a look at the other project Dimitris has released on the Ovi Store: Galaxy Jump.

Before I began designing a whole new dialogue system, I thought I’d first google what other people have created. The very first hit was this Mass Effect dialogue system. Not bad I saids to myself. So I copied it investigated it and ended up using a similar system.

At its very core, the dialogue system consists of Branches and Hubs. A branch is a series of speech lines; the sentences a character says as well as his pose (remember, this is a 2D game, so no animations). A branch either terminates the dialogue, or reaches a hub. A hub has a list of branches which basically are the player’s options.

A hub can be of three types:

• a Normal Hub
  which contains a list of branches,
• an End Hub
  which terminates the dialogue,
• or an Info Hub
  which returns to the original hub once the branch ends

Pretty straightforward, don’t you think? Here is a diagram to clear any confusion:

Dialogue Diagram

While the Mass Effect sample was great, it was way more complicated than what I needed. First of all, Mass Effect has a morality system, so the branches where either good, bad or neutral and they were placed around a wheel. For Info branches, you had to select a special “Investigate” option to view them.

I have no morality system, and I don’t want my info branches to seem any different than any normal branch. So I simplified it by making info branches nothing more than a branch that has its NextHubID set to the same Hub as the one it was choosen from. I also eliminated the limitation of having 3 branches (good, bad and neutral) to unlimited. Finally, I removed the sound property since I won’t be having any voice overs (sigh).

On the designing side, the sample comes with an editor. Which doesn’t really look easy to understand:

Editor for the Mass Effect-style Dialogue System

So I made a more designer-friendly tool:

Xanor Dialogue Editor

Reminds you of something?

To do this, I had to test a LOT of diagramming libraries: Netron, Piccolo2D, QuickGraph etc, etc. I ended up with Open Diagram mainly for its simplicity.

Here is a boring video that demonstrates how the whole system works (the interesting part is at 1:53):

Click here to view the video on YouTube.

Now that I am able to create the dialogues and basically write the entire story of the game, I have to focus on a much more important system: the battle system.

So, stay tuned!

First of all, I would like to thank Alex Champandard for giving me the opportunity of having a poster of my BSc dissertation, StarPlanner, at this year’s Paris Game AI Conference. In fact, I am thankful to a number of people that helped me during and after the development of the project. Jeff Orkin who linked StarPlanner’s website on the official GOAP website, Eric Jacopin who used the source code as learning material for an internship and provided plenty of feedback, Edmund Long for his implementation of GOAP in C++ and William van der Sterren for his help in the AiGameDev forums.

Wallpaper for the Paris Game AI Conference 2011

Planning was a big thing this year, having a short tutorial talk from Luke Dicken and an entire panel about its pros, cons and future, which meant that my project was an awesome conversation starter ;) So I met a lot of great people in person. Can’t wait for next year’s conference.

Anyway, on with the main subject.

About ten months ago, I began working on a vertical shooter using the XNA framework. However, I had to stop for a while due to Greek’s obligatory military training. That is (finally) over and it’s time to get back to business.

The Pitch

Xanor (Working Title) is a vertical shooter (like Aero Fighters) with many JRPG elements such as Leveling up, Mana Power, Talent Trees and Side Quests.

Game Overview

Xanor is a top-down space shooter where the player assumes the role of Reik, a pilot who became an outcast as a result of a failed mission that caused his hometown to vanish. With the help of his trusted but, somewhat, clumsy engineer, Mishi, and an advanced alien technology, his mission is now to regain his identity back by reestablishing his hometown as the dominant empire it once was.

Thanks to Mishi’s talent, the player is able to upgrade his spaceship with powerful weaponry and defenses. Four types of spaceships are available to choose from:

• The Spartan
  This is the most dexterous ship of all. It is able to equip a vast amount of weapons that are easily upgraded.
• The M109
  This ship is able to receive an extensive amount of damage and still be able to attack.
• The Ulonar
  The Ulonar becomes more powerful the more damage it receives.
• The Summoner
  The agile drones that orbit around the Summoner is a great way to get the job done.

To make a living and be able to pay the upgrades he needs, Reik hunts down bounties. He has gained a reputation for being fierce and, as a consequence, he is hired by many to do their dirty work (such as escorting ships or flying spacecrafts). Among the scumbags and lowlifes that usually hire him, there is this young woman who awards him with something more valuable than money: information on how to destroy the federation and complete his mission.

However, the destruction of the federation has catastrophic consequences.

Technical

Xanor is written in C# using Microsoft’s XNA Game Studio 4.0 framework. The goal is to release it as an XBOX Live Indie Game. Here is a short video I did a while back (the art is currently placeholder sprites made – with permission – by SquirrelSquid):

Click here to view the video on YouTube.

Under the hood Xanor is going over massive structural changes. I fell into the classic deep hierarchy problem and, after some research, I began working on a component-based entity system.

The good news is that last week I was fortunate enough to meet SiGra, who will be creating Xanor’s characters. Thus, currently I am focusing on developing a dialogue system.

Mishi

I will be posting updates of Xanor’s development as each component of the engine is stable enough for a demonstration. So stay tuned!

Click here to view the video on YouTube.

StarPlanner is a StarCraft bot that implements a Goal-Oriented Action Planning (GOAP) agent architecture. The architecture includes a Blackboard for subsystem communications, a working memory and an regressive planner for decision making. There are two levels of planning in StarPlanner: a high level strategic planner that creates a plan depending on the current state of the game and a low level build planner that creates a plan to build or train the required units in order to carry out the high level plan.

Click here to view the video on YouTube.

StarPlanner is written in Java and uses BWAPI (specifically, JBridge) to communicate with StarCraft. The project architecture is layered: at the lowest level there is an A* search engine. On top of that there is a generic GOAP architecture that uses the A* engine for its searching. And, finally, StarPlanner is a concrete implementation for StarCraft of the generic GOAP architecture.

StarPlanner Layers

Full source code and documentation along with the full report and videos as delivered to City College can be found at http://pekalicious.com/starplanner/ppeikidis.html

Post Mortem

I wish I had more time for the project and added a lot more actions from which the bot could choose. The biggest time-waster was trying to create an XNA 2D game from scratch. That was way before I discovered BWAPI in the middle of the semester. Of course, even after I used BWAPI, a lot of the functionality had to be created: controlling units, training units, etc. Although there is an extension of BWAPI called BWSAL that handles a lot of this for you, this wasn’t ported in Java.

The GOAP architecture was done thanks to Edmund Long‘s MSc thesis “Enhanced NPC Behavior using Goal Oriented Action Planning”. Edmund implemented it in C++ in a 2D simulation he developed from scratch. I ported the code in Java and split it into the layers described earlier. This was this easy part.

The hardest part was modeling an RTS game in order to make decisions. Planning is a searching algorithm that uses a world state, a goal state and a set of actions to produce a plan (a sequence of actions that, when executed, will change the world state to the goal state). The actions contain preconditions and effects. Preconditions of an action are essentially a list of properties that must be true in the world state, otherwise the action cannot be performed. If all preconditions are true, the action can be selected. A heuristic is used to decide which of the valid actions should be chosen. Finally, the effects of the chosen action alter the world state and the cycle continues until the world state is the desired one.

So, initially the idea was to use any data type as a precondition and an effect. The world state then would have a set of integers, booleans or anything really. So, for example, when I wanted to create a plan that trained 3 Marines, the goal state would have an integer “marines = 3″ as a precondition. The plan then would be “Build Barrack” -> “Train Marine” -> “Train Marine” -> “Train Marine”. Unfortunately this was harder than I thought so I went with a boolean-based approach. However, this solution has other limitations. For example, a precondition can be “haveMarines = true”. But how many marines? 10? 12? 100? So finally, I decoupled the units from the buildings and now training is the responsibility of a TrainManager who constantly trains units  (as long as there are resources) until a new plan is created.

The bot is not, by any stretch of the imagination, a good AI player. It only does a limited number of actions and hardly can win a game (except when you are demonstrating it *cough*custom*cough*maps*cough). There where two reasons for this: first, I had to create managers that could successfully move units, battle against enemies, use unit abilities, upgrade, etc, etc, etc. And second, at the time, I wasn’t that much of a good player in StarCraft. I’m no pro, mind you, but I have been following the StarCraft II community (which, incidentally, launched right in the middle of my project) and realized how bad a player I was. A big thanks to Sean Plott and his Day[9] Daily videos who made it clear what is actually a strategy and what is a tactic in an RTS game.

All these delays also made it impossible to enter the first StarCraft AI Competition that was announced a while before I began the project. Another lost opportunity.

Final Thoughts

Even though a lot of things could have gone better, I am really satisfied with the results. When I started my dissertation 2 years ago, planning was a big deal in the world of Game AI, so I was kind of proud. I still am. In fact, I loved so much working on the project, that my professional goal is to work in the Game AI industry!

After attending the first Hellenic Artificial Intelligence Summer School, I’m on my way to this year’s Paris Game AI Conference. All the while creating my first XNA video game for XBOX Live (coming up in a future post).

So yeah, once I’m done with my country’s military obligations this August, I’m flying to USA looking for a job. Wish me good luck!

First of all, here is how much you need to worry about the cost of the “If-then-else” statement: not at all*. You see, an “If-then-else” statement in your code creates a branch in the instruction list. If the statement is true, the processor will execute a particular instruction list, if not, it will execute another. The processor, always striving for optimizations, tries to predict which way the branch will go and pre-load the instructions. A wrong prediction is known as a “Branch Miprediction“. The penalty? In modern microprocessors, 10-20 cycles[1]. Your average 2.4GHz CPU can perform 2.400.000.000 cycles/second. That is 2.4 billion cycles per seconds, in case you haven’t noticed. Billions… Per second… So I think it’s pretty safe to say that this has absolutely no affect in your average pet-project.

One particular student, however, took this at face value and came up with the following gem:

public void doSomething(int code) {
  while ( code == 101 ) {
    doThis();
    break;
  }
  while ( code == 102 ) {
    doThat();
    break;
  }
  while ( code == 103 ) {
    justDoIt();
    break;
  }
  ...
}

After I got over the initial shock I turned to him and asked “So why didn’t you use a for loop?” to which he replied “I would have, but the while loop came into my mind first.”

* Except if you are writing an extremely performance-critical application.

References

[1]: Branch Predictor – Wikipedia

The Intro

It’s really difficult to find something in the Internet when you are not really sure how to phrase it. That’s why you need to practice your google-fu as much as possible. See, I was looking for a way to have a JPanel with buttons in a JTable cell, but had no idea how to look for it. JPanel in JTable? JPanel with buttons in JTable? JTable JPanel JButton?

OK, to be fair, I’m pretty sure my answer is in there somewhere deep (as in, after the first 3 results). But, as any impatient person that respects himself, I went the easy way: StackOverflow: JTable: Buttons in Custom Panel in Cell.

You see, most examples I found with Google talked about Cell Editors, but for simple column components, such as using a JTextField to edit an integer, or a JComboBox to edit a String etc. I wanted a custom JPanel that did not change, but simply had interactive controls.

In retrospect, I could have simply used a panel with MigLayout, but NO! I wanted the challenge. I wanted to learn how to do it. Plus, now I can sort my table (which is absolutely useless in my context).

Anyway, on with the code!

The Code

First thing’s first, we need to have a basic ADT that will contain some data. This is what we ultimately want to display in our table rows. Let’s say we want to have some RSS Feeds.

public class RssFeed {
  public String name;
  public String url;
  public Article[] articles;
 
  public RssFeed(String name, String url, Article[] articles) {
    this.name = name;
    this.url = url;
    this.articles = articles;
  }
}
 
public class Article {
  public String title;
  public String url;
  public String content;
 
  public Article(String title, String url, String content) {
    this.title = title;
    this.url = url;
    this.content = content;
  }
}

Yeah yeah, make the fields private, add getters/setters blah blah blah. Here is a simple JFrame that displays a JTable with some example data:

public class JInteractiveTableExample extends JFrame {
  public JInteractiveTableExample() {
    super("Interactive Table Cell Example");
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setSize(500, 300);
 
    List<RssFeed> feeds = new ArrayList<RssFeed>();
    feeds.add(new RssFeed("pekalicious", "http://feeds2.feedburner.com/pekalicious",
      new Article[] {
        new Article("Title1", "http://title1.com", "Content 1"),
        new Article("Title2", "http://title2.com", "Content 2"),
        new Article("Title3", "http://title3.com", "Content 3"),
        new Article("Title4", "http://title4.com", "Content 4"),
    }));
    feeds.add(new RssFeed("Various Thoughts on Photography", "http://various-photography-thoughts.blogspot.com/feeds/posts/default",
      new Article[] {
        new Article("Title1", "http://title1.com", "Content 1"),
        new Article("Title2", "http://title2.com", "Content 2"),
        new Article("Title3", "http://title3.com", "Content 3"),
        new Article("Title4", "http://title4.com", "Content 4"),
    }));
 
    JTable table = new JTable(
      new Object[][] {
        new RssFeed[] { feeds.get(0) },
        new RssFeed[] { feeds.get(1) }
      },
      new String[] { "Feeds" }
    );
    add(new JScrollPane(table));
  }
}

Here we create two RssFeeds with articles on the fly and add them to a JTable. If we run this example, we will see that each row displays the toString() value of our RssFeed object.

JTable without a Cell Renderer

This is the default behavior of JTable when the data is not a known class (Strings, ints, etc.) We can change this behavior by creating a custom TableModel. Here is a basic table model for our example:

public class RssFeedTableModel extends AbstractTableModel {
  List feeds;
 
  public RssFeedTableModel(List feeds) {
    this.feeds = feeds;
  }
 
  public Class getColumnClass(int columnIndex) { return RssFeed.class; }
    public int getColumnCount() { return 1; }
    public String getColumnName(int columnIndex) { return "Feed"; }
    public int getRowCount() { return (feeds == null) ? 0 : feeds.size(); }
    public Object getValueAt(int rowIndex, int columnIndex) { return (feeds == null) ? null : feeds.get(rowIndex); }
    public boolean isCellEditable(int columnIndex, int rowIndex) { return true; }
}

We then simply change our table declaration to:

JTable table = new JTable(new RssFeedTableModel(feeds));

Voila! We now see the exact same thing in our table!

JTable with Table Model (but still no Cell Renderer)

Errr.. OK, so it turns out that it’s not the Model that converts our objects into Strings, but the Renderer. Each JTable has a TableCellRenderer that, given an object, it returns a Swing component that can be used to display the underlying data.

So now we need to tell the JTable how to convert an RssFeed into a Component. We can do this by implementing the TableCellRenderer like so:

public class RssFeedCellRenderer implements TableCellRenderer{
  public Component getTableCellRendererComponent(JTable table, Object value,
        boolean isSelected, boolean hasFocus, int row, int column) {
    RssFeed feed = (RssFeed)value;
 
    JButton showButton = new JButton("View Articles");
    showButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent arg0) {
        JOptionPane.showMessageDialog(null, "HA-HA!");
      }
    });
 
    JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT));
    panel.add(new JLabel("<strong>" + feed.name + "</strong>"
            + feed.url + "Articles " + feed.articles.length + ""));
    panel.add(showButton);
 
    if (isSelected) {
      panel.setBackground(table.getSelectionBackground());
    }else{
      panel.setBackground(table.getSelectionForeground());
    }
    return panel;
  }
}

We also need to register this renderer in our table:

JTable table = new JTable(new RssFeedTableModel(feeds));
table.setDefaultRenderer(RssFeed.class, new RssFeedCellRenderer());
table.setRowHeight(60);

In the above lines, we effectively say “Whenever a column is an RssFeed class, use this renderer”. We already said that our one and only column is of type RssFeed in our table model:

public Class getColumnClass(int columnIndex) { return RssFeed.class; }

Now if we run our application, we can finally see something useful (although, I still prefer reading “com.pekalicious.interactiveJPanelTableCell.data.RssFeed@106caf16″. Yes, I’m THAT good):

JTable with Renderer

There are two things that are wrong here: first, every time the JTable needs to render a cell, it will instantiate a new JPanel. This can harm the performance if there are many rows. Second, the button does not work! Cell renderers are used only for what they say, to render cells. They do not provide any mechanism for the underlying components. However, JTable also has Cell Editors. Cell Editors work pretty much the same way as Renderers, they take an Object and return a Component, but the component returned can be interactive.

As you have probably guessed already, you can have different components returned by renderers and editors. An int, for example, can be rendered using a JLabel and edited using a JTextField (which is the default behavior of JTable). However, in our example, we want the same panel both for editing and rendering. This is why we will create a common Component that will be used by both:

public class RssFeedCellComponent extends JPanel {
  RssFeed feed;
 
  JButton showButton;
  JLabel text;
 
  public RssFeedCellComponent() {
    showButton = new JButton("View Articles");
    showButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent arg0) {
        JOptionPane.showMessageDialog(null, "Reading " + feed.name);
      }
    });
 
    text = new JLabel();
    add(text);
    add(showButton);
  }
 
  public void updateData(RssFeed feed, boolean isSelected, JTable table) {
    this.feed = feed;
 
    text.setText("<strong>" + feed.name + "</strong>" + feed.url + "Articles " + feed.articles.length + "");
    if (isSelected) {
      setBackground(table.getSelectionBackground());
    }else{
      setBackground(table.getSelectionForeground());
    }
  }
}

Now, our cell renderer becomes:

public class RssFeedCellRenderer implements TableCellRenderer{
  RssFeedCellComponent feedComponent;
 
  public RssFeedCellRenderer() {
    feedComponent = new RssFeedCellComponent();
  }
 
  public Component getTableCellRendererComponent(JTable table, Object value,
      boolean isSelected, boolean hasFocus, int row, int column) {
    RssFeed feed = (RssFeed)value;
 
    feedComponent.updateData(feed, isSelected, table);
    return feedComponent;
  }
}

And once again, nothing changed! But we did optimize (and that’s always good, right?). Now, there is only one instance of RssFeedCellComponent which changes it’s components depending on the RssFeed passed. In addition, creating a Cell Editor that returns the same component is now pretty simple:

public class RssFeedCellEditor extends AbstractCellEditor implements TableCellEditor {
  RssFeedCellComponent feedComponent;
 
  public RssFeedCellEditor() {
    feedComponent = new RssFeedCellComponent();
  }
 
  public Component getTableCellEditorComponent(JTable table, Object value,
      boolean isSelected, int row, int column) {
    RssFeed feed = (RssFeed)value;
    feedComponent.updateData(feed, true, table);
    return feedComponent;
  }
 
  public Object getCellEditorValue() {
    return null;
  }
}

And now we register our editor:

JTable table = new JTable(new RssFeedTableModel(feeds));
table.setDefaultRenderer(RssFeed.class, new RssFeedCellRenderer());
table.setDefaultEditor(RssFeed.class, new RssFeedCellEditor());
table.setRowHeight(60);

We can do even better. We can combine all three classes, RssFeedCellComponent, RssFeedCellRenderer and RssFeedCellEditor into a single RssFeedCell:

public class RssFeedCell extends AbstractCellEditor implements TableCellEditor, TableCellRenderer{
  JPanel panel;
  JLabel text;
  JButton showButton;
 
  RssFeed feed;
 
  public RssFeedCell() {
    text = new JLabel();
    showButton = new JButton("View Articles");
    showButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent arg0) {
        JOptionPane.showMessageDialog(null, "Reading " + feed.name);
      }
    });
 
    panel = new JPanel(new FlowLayout(FlowLayout.LEFT));
    panel.add(text);
    panel.add(showButton);
  }
 
  private void updateData(RssFeed feed, boolean isSelected, JTable table) {
    this.feed = feed;
 
    text.setText("<strong>" + feed.name + "</strong>" + feed.url + "Articles " + feed.articles.length + "");
 
    if (isSelected) {
      panel.setBackground(table.getSelectionBackground());
    }else{
      panel.setBackground(table.getSelectionForeground());
    }
  }
 
  public Component getTableCellEditorComponent(JTable table, Object value,
      boolean isSelected, int row, int column) {
    RssFeed feed = (RssFeed)value;
    updateData(feed, true, table);
    return panel;
  }
 
  public Object getCellEditorValue() {
    return null;
  }
 
  public Component getTableCellRendererComponent(JTable table, Object value,
      boolean isSelected, boolean hasFocus, int row, int column) {
    RssFeed feed = (RssFeed)value;
    updateData(feed, isSelected, table);
    return panel;
  }
}

Now we use only one Panel for all rendering and editing!

JTable with Renderer and Editor

The Conclusion

Every time I try to use a JTable I discover how difficult it is to just create a f*cking simple table, but I also see how powerful it is for more complex things. I’m pretty sure there is a way to display the button only on mouse over. You know, web2.0-y.

Anyway, that’s that. As usual, you can find the source and the executable in my Java Corner.

Now excuse me, but I got some Void Rays to counter attack. En Taro Adun!

I was going to start with an introduction to Lists, but this needs a lot of research (about 5 minutes) so I will just reference Wikipedia (which took 2 seconds):

“The Bullets and Numbering system has been significantly overhauled for Office 2007, which is intended to reduce the severity of these problems.” -Microsoft Word, Wikipedia

I’m not pretty sure if you can modify multi level lists prior to 2007 because this is the first time I’m doing this. But anyway, in Word 2007 you have the ability to define new multi level lists styles which is VERY useful for numbering your headings.

Let us begin by writing some chapter and section titles. As I told you yesterday, we will first write our document and then style it. So add some old fashion Lorem Ipsum text after each title. If you are lazy like me, you will probably find this tool handy: Lorem Ipsum Generator. Or, use Word’s built-in command “=lorem(X)” where X is the number of paragraphs; i.e. =lorem(2). Thank you Geri for this tip.

Example without styles

Once you are done with your titles, style them with the appropriate heading style. Forget about setting the numbering in the heading style. We will number them in a better way.

Example with Heading styles

Now, select your first heading and click on the “Multilevel List” in the “Home” tab and choose “Define New Multilevel List….”.

Define New Multilevel List

On the bottom left of the “Define new Multilevel list” window click on the “More >>” button. This is what you will see:

Multilevel List Dialog

Here we can select a level of the list (in the top left) and change its style.

Let’s say you want each Heading 1 to include “Chapter”. Simply enter “Chapter” before the number in the “Enter formatting for number:” text field. I personally don’t like spacing, so I set both “Aligned at:” and “Text indent at:” to 0 cm. Finally, I prefer a single space instead of a tab before my title, so I set “Follow number with:” to Space.

But aside from styling your list, the important step is to link this style to your header. You do this by selecting “Heading 1″ to the “Link level to style:” drop down list.

Link level to style

For levels other than 1, you can include the number of its parent level. This is very useful when you want sub sections to look like “1.2.1 Title”. Simply edit those levels and select the level you want in the “Include level number from:”. Don’t forget to link each level to the appropriate headings style.

Include Level Number

You should now have each heading numbered correctly!

After Numbering

But what about appendices? What if you want Appendix A, Appendix B etc? Well, we know that appendices appear in the Table of Contents as the same level as Heading 1, so clearly they have to be in the first level of the list.

So, one way of setting this is by applying the Heading 1 style to each. Then, select your first appendix title and define a new style. The settings of the current active list style are already set, so you don’t need to set everything again. This time you have the option to select how to apply these changes. Choose “This point forward” in the “Apply changes to:” drop down list and then make your changes. Set, for instance, the “Enter formatting for number:” to Appendix and the “Number style for this level:” to “A,B,C,…” and then the “Start at:” to “A”.

Appendix Multilevel List Style

While this will do the trick, you have to manually set the new style. I hate manuals! So let’s make them autos.

Create a new style by opening the “Styles” windows and clicking “New Style”. Name it “Appendix”, set the “Style type:” to “Linked (paragraph and character)” and “Style for following paragraph:” to “Normal”.

Now, this is where the magic happens: set the “Style based on:” to “Heading 1″ and click “OK”. This will link this style with Heading 1, which means two things: a) any changes in Heading 1 will be set to Appendix as well and b) the title of this heading will be set to the same level of Heading 1 in Table of Contents.

Appendix Style

If you now apply the Appendix style to your titles, you will see that “Chapter” appears before them. To set this to “Appendix”, select your title and define a new multi level list. Next, select the fourth level and set the “Link level to style:” to “Appendix”. Make any changes to the style you want (like setting “Appendix”) and your done!

Appendix

When you will generate your Table of Contents, you’ll see that Appendices are at the same level as Heading 1. If you change the Appendix style to be based on Heading 2, this will be visible to the Table of Contents as well.

Table of Contents

Easy!

Introduction

When I need to write a formal document (like my thoughts on why my neighbors feet smell) I usually go with LaTeX. Not because the name brings interesting thoughts, but because you don’t have to deal with fancy stuff, like “What color should my title be?” or “Are the margins too narrow?”.

Now, don’t get me wrong, I’m all for fancy stuff. But I also get easily extracted. Hey, since when did WordPress add Ctrl+S for saving? I did it by accident (oh, you must make saving a habit, trust me) and it worked! Cool!

As I was saying, Microsoft Word has a lot of fancy things you can do with your plain and boring words, but they usually get on your way when you want to quickly – and I mean quickly, like, the deadline is in two hours – write your essay without adding anything. So I ended up using Word for my drafts until it was time to get serious. Then I would copy & paste the text in a .tex template I have created over the years and go on from there.

But recently I have been a little lazy. And by recently I mean the last two years. And by two years I really mean five. The thing is, LaTeX requires a lot of energy when you want your document to be fancy. Like any other thing in the Linux world, LaTeX has a LOT of options for anything you can think of. From fancy headers to editing the space around a title. The drawback, of course, is that they aren’t in the tip of your finger, more like in a corner down at the basement of a house in the next town of the far away country. In other words, you have to find it, grab it, set it up, learn it and then you can TRY using it.

Just to give you an idea of the situation, here is the template I created. Every time I find something fancy I just drop it in there and see what happens. And here is an example output.

And to top that, LaTeX doesn’t have a standard editor. There are a couple of them lying around but each and everyone I have tried seems like it’s missing X but has Y. I mostly use TeXnicCenter because it supports projects. There is also a WYSIWYG editor, which probably beats the whole idea of LaTeX in the first place, but that’s another discussion.

Anyway, recently I have been looking into Word with a different eye, the left one. I finally figured out how to properly use headers and footers, how referencing works, how to style my document in a consistent manner and various other neat tricks. So, before I forget them I thought of writing them down and accidentally sharing it with the world as if it was for them. Pff, silly Internet people.

So, without further ado, here is a list of features in Microsoft Word 2007 and how to use them.

Headers and Footers

STOP right where you are! I can see you typing your name on the header. Do you know what a section is? Do you know what is “linking” between sections? Do you know what is the option “Different First Page”? Do you know that I’m riding this horse backwards? Well, you should.

Section breaks are used in Word to separate layout or formatting in a document, such as page numbering. This is essential when you have a title page, a table of contents page, a list of figures page, a list of tables page, a list of lists page, and you want them all to have different headers and footers.

Remember how to start a paragraph in the next page? You press 1000 times the Enter key. Or, you simply click the “Page Break” and your done. Well, a section break is similar. Only this time you go the next page AND add a new section. Section breaks can also start in the middle of the page, an even page, or in an uneven page.

You can do this by going to the “Page Layout” tab and clicking on the “Breaks” drop down button. You can see there are four options for entering a section.

Section Breaks

Let’s click the first option, “Next Page”. Just like the “Page Break” our cursor was sent to the next page and nothing else has happened. Now, either double click the top of the page or go to the “Insert” tab, click the “Header” drop down button and select any option. You will see that a contextual tab called “Design” has appeared with various options.

Design Contextual Tab

You will also see that the header now says “Header -Section 1-” or “Header -Section 2-” instead of plain “Header”.

Header Sections

Now start typing in the header. Not anything, type “pekalicious.com”. Thank you. Now look at the header in section 2, same thing. Thank you again. But we want to have different headers for each section. So click anywhere in the section 2 header and then click on the preselected button “Link with Previous”. Nothing will happen, but if you now change it to, let’s say, “pek”, the header in section 1 will stay the same, “pekalicious.com”. Thank you once more.

Link to Previous

OK, we now have separated our sections, let’s add some real content. Let’s go to the footer and try to add “Page/Total Pages”. So go to the footer and hit tab two times to go all the way to the right. You can always do this the easy and boring way: by clicking at the “Page Number” drop down list. But I like to have control.

Page Number Options

The way I do it is by going to the “Insert” tab, click the “Quick Parts” drop down and select “Field…”. This has a list of a lot of useful things. To insert the current page, slide down the list, select page and click “OK”. Oh, did I forgot to tell you to unlink the footer as well? Go to the footer of the first page of section 2 and unselect the “Link to Previous”. Don’t forget to delete the page number in section 1.

Everything seems fine until you notice that the page number in section 2 is 2 instead of 1. Well, unfortunately, you have to set the “Start at…” option. To do so, select the number, go back to the “Design” tab, click the “Page Number” drop down and select “Format Page numbers…”. Here you can set the number format, like the fancy Roman “I,II,III”, include extra information and set the “Start at”, which is what we want. So select that and enter “1″.

Page Number Format Options

Now let’s add a “total pages” number next to the page number. To insert this, go back to the “Field…” window and select the “SectionPages”. NOT the “NumPages”! The former will enter the total number of pages of the current section while the latter will enter the total number of pages in our document.

Another interesting option for the sections is the “Different First Page”, which will allow you do edit the first page of each section separately from the next. It’s kinda cool, but I find it easier to simply add another section.

Summary

So, for all you TL;DR people out there, here are some fancy bullet points (and by fancy I mean “plain”):

• Use sections to separate different styles for different pages
• Don’t use “Link with previous” in order to separate them
• Use section-related fields (SectionPages instead of NumPages)
• Set the “Start at…” option to get your page number right

Headings

Here is what LaTeX has learned me: write first, add other shit later. In other words, leave Table of Contents, Headings and other stuff AFTER you have finished your first draft. This is important for two reasons: a) you don’t get distracted and b) you don’t get distracted. There are two levels of distraction in Word, you either try to style your document when you really have to write, or you added a style to the entire paragraph instead of a sentence and you have do undo, select carefully the words you want and style them.

Have you ever styled a paragraph and start writing only to discover that it has the same style? Typical in word processors. Here is a quick tip: press Ctrl+Space before you start typing the next paragraph. Voila! No styling what so ever! In fact, select any text that has some sort of formatting (like bold) and hit Ctrl+Space. Voila again!

Anyway, probably the most useful style is the Headings, aside from Bold, Italics and Color. Or Text Direction, Bullets and Indention. Or Font Family, Font Size and Strikethrough. Or… Anyway, Headings are important.

Luckily, headings DON’T continue after you have pressed enter. Cool right? Well, this can be configured for any style in that fancy box of styles up there. Even more cool is that you can have a consistent style for all your headings without selecting one by one and changing them. Just right click on any style and select “Modify”.

Modify Style

Here you have a LOT of options. The “Style for following paragraph” will do the Enter trick. Feel free to change everything and see what happens.

Another important thing about the headings styles is that they are used to automatically create a table of contents. Add some Heading 1, 2 and 3 styles and then go to the “References” tab, click on the “Table of Contents” drop down and select one. Magic!

Table of Contents

The cool thing about the table of contents is that you don’t have to write it yourself. Every time you add a new Headings style, simply click on it and hit the “Update Table” button.

Update Table of Contents

By the way, if you happen to loose a style (it doesn’t appear in the Quick Styles list on top) click on that little icon on the bottom right of the styles box to show the “Styles” window. Then click on the “Options…” on the bottom right of that window and select “All styles” in the “Select styles to show” drop down. Once you use the style it will appear again at the top. If it doesn’t, then right click on it, select “Modify” and check the “Add to Quick Style list”

Add Style to Quick List

I love this Ctrl+S feature in WordPress!

Among the many options you have for formatting the Headings, the one you will likely need is numbering. Especially if you are in the academics field. To add numbering go to the “Format” drop down and select… erm… “Numbering”. Here you have a variety of options, but let’s make it more interesting. Select the simple numbering “1,2,3,…” and click “Define New Number Format…”. In the “Number format:” field, before the number, enter “Chapter “. Tada! All Headings start with Chapter. You can do the same for Headings 2 and enter “Section” etc.

Numbered Headings with Text

But wait, now the “Table of Contents” title says “Chapter 1. Table of Contents”. Surely we don’t want that. To fix this, simply… delete it! The next heading will automagically have the right number.

Update: Turns out, there is a better way of numbering your headings.

Summary

So, to summarize:

• First write, do other shit later
• Use Headings to automatically generate Table of Contents
• Modify the style instead of a specific heading
• Optionally add number and text before the title

References

One of the best things in LaTeX is its simplicity of adding citations: just add “\cite{Name_of_Citation}” which you have already defined in a Bibtex file in the Bibtex format, insert it into your main document, compile twice and your done. OK, maybe I have done this 23098420938 times, but still, this will add a fancy “Bibliography” at the end of your document with correct numbering and format (APA, IEEE etc). There is also this amazing tool, JabRef, that will help you.

Let’s do the same fancy thing in Word. First of all, you need to decide what style you will be using. If it’s APA, your OK, but if you are unlucky like me, it’s definitely IEEE. This is not included in 2007, but you can download it here. Copy the file in the %programfiles%\Microsoft Office\Office12\Bibliography\Style directory and restart Word. You should now see the IEEE in the drop down in the “References” tab.

IEEE Reference Style

Let’s add some sources: click on “Manages Sources” and add some books. Good thing there is a Master List, this will save you in the long run.

Source Manager

Go at the end of any word, click the “Insert Citation” drop down and select your book. That’s it!

Insert Citation Menu

If you use APA, you will see “(pek, My Boring Book, 2010)” or, if you use IEEE, you will see just a boring “[1]“. To create the bibliography at the end of your document, just click on the “Bibliography” drop down and select the style you want. This works the same way as Table of Contents, so if you see “Chapter X” simply delete it.

Bibliography

That was easy. Even easier are footnotes. Just click on the “Add Footnote” button and enter your text.

Footnote

To create the list of figures, you must insert captions. Not the ones where you try to position the text under an image and call it a caption, I mean real captions, as in, select the image, go to the “References” tab and click “Insert Caption”. Once you have done that to a couple of images, insert anywhere you want in the top of page 3 the table of figures by clicking “Insert Table of Figures”. Again, works the same way. Make sure not to delete the number that is automatically added, otherwise it will not show up in the Table of Figures.

Table of figures

To cross-reference a section, a figure, a table, or any text, go anywhere and click “Cross-reference”. There are many options there, but I will focus on bookmarks. You can bookmark anything in a Word document by simply selecting it and clicking the “Bookmark” button in the “Insert” tab. Just enter the name of the bookmark and click “Add”. To cross-reference this select “Bookmark” in the “Reference Type” and then chose what to reference to in the “Insert reference to” drop down.

Bookmark

Finally, we can create an Index page that lists all of our important words, like Donkey. Select a word or phrase, click on the “Mark Entry” in the “Reference” tab and then click “Mark” in the . This will add some gibberish next to the word and also show all kinds of stuff. These stuff can be hidden again by clicking the “Show/Hide Marks” in the “Home” tab. Once you are done creating all your entries, create the index page by clicking “Insert Index” in the “Reference” tab.

Index

Have I mentioned how much I love WordPress’ Ctrl+S?

Summary

That’s it for the references. Pretty simple I think. And here are your bullets:

• Citations, Table of figures and Index can all be created automatically
• Use the “Insert Caption” instead of manually adding text under your image
• Use “Bookmarks” to cross-reference anything in your document

General Tips

SAVE. SAVE SAVE SAVE SAVE. I can’t emphasize this enough. Make Ctrl+S a habit. And I’m not just talking about Microsoft Word; PowerPoint, notepad, trees, everything. Just save whenever you stop for more than 2 seconds.

First type and then style. Even when you want to bold a text. You will avoid “bolding” a lot of things. Just remember, in case of panic, use Ctrl+Space.

Use comments under the “Review” tab to remember things. Comments catch your eye easier than underlining a sentence.

Conclusion

After finally figuring out the sections and citations, I started appreciating Word more. Of course, I still prefer LaTeX for my “serious” documents (see Cook Book), but now I can use Word for more than just drafts. And these are only the basics. I have yet to discover what this “Mailings” tab is or how to properly use the “Equation”.

Have fun.

And save.

Either my google-fu isn’t what it used to or a demand for such an utility isn’t what I had imagined. I’m talking about a small application that will take an animated gif file and turn it into a single sprite sheet. Let me rephrase that to make it a little more clear: JSpriteSheetCreator will convert a file FROM an animated gif TO a single png sprite sheet.

Yeah… I repeat that because searching for “convert gif to single sprite sheet” or “from gif “to sprite sheet”” or “sprite sheet converter” or “<other search you think will work>” and any other combination of words I looked for didn’t work. Google kept returning from sprite sheet to gif. Which is kind of weird because, as I see it, in games, you have better control of the animation with a sprite sheet than a gif. On the other hand, making an animated gif is probably useful for many other reasons.

Anyway, the only application that I finally found was Avi4Bmp. Which does the basic job of converting from an animated gif to a png and vise versa pretty good. But I have more ideas for such a tool.

Initially, JSpriteSheetCreator will do just that. But in my next iteration I will add support for reordering the frames and of course import/export xml animation data (WARNING: as of this time, google will tell you that ziggyware is an attack site. They are probably hacked so make sure you know what you are doing i.e. use AdBlock and/or NoScript) that will help integrate this into a game developers workflow.

As any other utility I develop, I am hosting this in my own server. You can find it under my Java Corner. You can even run it without downloading it with Web Start (provided you trust me). You can also find the source code.

Of course, I would like to thank Kevin Weiner for his ultra slim GifDecoder class.

Enjoy!