There are a few reviews for iRis up now, but this one by the Daily App Show is in swishy youtube video format, and they say nice things about us, so I’m posting this one up here for all to see.

Here is my entry for the 2009 Blender World Cup. The theme was “Another World”. I came up with a crashed fighter pilot marooned on a strange jungle planet, inhabited by giant bugs. It’s pretty busy, so view full size to take it all in.

Update: My entry won the spot prize for best modelling. I’m really happy about this as I think it reflects the elements I did best on. Next year I’ll focus on other areas, to try and up my game and take one of the top prizes.

So for the past few months I have been working for Rogue Pirate Ninja interactive on a game for the iPhone called iRis. The game is a 3D tile matching game much like Columns or Tetris, with the cool twist that instead of moving the falling block as it descends, you rotate the rest of the world underneath it. It’s pretty darn fun and we’re all rather proud to have made it.  So without further ado here’s the trailer:

So what are you waiting for? It’s only $2 on the iPhone App Store, so Go buy it!
Anyway, I thought I’d write up a post about what it’s been like working on the game. More after the jump…

iRis AG Development:

The development for iRis was based around a small team of people, led by Jonathan Wolf, also the main programmer on board. Along with myself – the artist on the team, and Bradley Burr, who did the music and sound, we formed the core team that worked on iRis. For a full list of the awesome people who made the game possible check out the RPNi site. For the art production, I used my favourite open source tools: Blender, GIMP, and Inkscape.

Blender for Developing iPhone Games:

I should point out that we don’t use blender’s game engine for the game. Rather we use our own engine called geWiz ES. To get assets into the game, we used a custom python script that exports an xml file very similar to the collada format, though pared down to just what we need, with a couple of features that collada lacks. From the export we can then load the assets pretty easily into the game engine, and this allowed us to be pretty flexible in making adjustments during the games development. All of the 3D assets were created in blender, along with the majority of the animations for the UI elements and animated backdrops, and since I could easily render out previews of the animations in blender we could rapidly see what the end resulyt would look like in game without even having to do an export. A great example of this is the galaxy model, used as a backdrop to the main menu. I originally produced it just as a concept which I rendered in blender, but with very little tweaking to optimise the poly count, it quickly became an asset that was part of the final product. Here’s a video of the galaxy rendered in blender from early in development, compare it to the one in the background of the trailer video above.

This kind of flexibility was a great asset to us and came in handy in creating mockups and prototypes before wading into big elements of the game. In particular, because we are a geographically widespread team (split between the US and the UK) collaborating using subversion, we couldn’t have made the game without it. Similarly for a lot of the 2D elements mockups were created in GIMP showing what the final screen would look like.

Various iterations of the main menu done in GIMP

Rolling with the changes:

As in any production, changes are made along the way, and in the case of iRis some major changes were made to the visual look of the main game fairly late-on in development. I felt that the original look of the main game was somewhat cluttered and certain elements which contributed little to gameplay were taking up disproportionately large amounts of screen real-estate, not to mention development time. Thanks to some quick mockups made in Blender and the GIMP, I was able to convince the rest of the team of this fairly quickly and deliver a simpler look for the main game pretty quickly, ultimately reducing the development time and improving the look of the game. Sometimes less is more, and much as I had worked hard on the assets that got canned, at the end of the day we made the game better.

A few assets we decided to drop from the game. Each was animated and built up out of nothing over the course of play. Whist this looked great, it took up too much room on screen for a hand-held device.

The finished product:

We’re all really proud of the game, it’s great fun to play and it looks great too. As our first iPhone game, and the first to use our engine, we think the results are great, and now we’ve got one under our belts the next is going to be even better. Go and check out the game for yourself, it’s only $2, with a free demo version coming soon.

The third piece of album art I’ve produced for Panic Elbow, and probably my favourite. This one was inspired by an alchemy sketch I did whilst listening to one of their songs – it had a darker feel than their other music, and obviously given the name, I thought it made a fitting accompaniment.

As usual, I encourage you to go and listen to their music on their MySpace page.

I came across Alchemy while watching David Leroy’s fantastic speedpainting video of a piece of Durian concept art. It’s a really nice way of generating some chaos to help inspire your drawing. The interface is mininmalistic and intuitive, and to tools create some really interesting shapes whilst also allowing a decent amount of control for once you want to start picking out specific forms. I’m not the greatest painter, but I think I managed some interesting results, starting with alchemy and then moving to GIMP to do the main part of the painting.

Soldier Sketch

Drawings based on random forms

Another piece of cover art I did for a friends band: Panic Elbow. Made with blender and the Gimp. The album isn’t out yet but I wanted to show it off. In the meantime you can check out their current music on the band’s myspace page, check them out!

I also did them an EP cover a while back.

For my fathers birthday this year I created a model of my family crest and had it printed in 3D by Shapeways. The final model arrived the other day and I’m pretty pleased with how it looks. Unfortunately I only have a point and shoot camera with fairly limited macro capabilities, so the photos don’t look that great, but I include a Luxrender render to show the details too.

Here’s a great technique that popped up on the forums, based on a siggraph paper by Isaac Botkin (link), here’s their video:

What intrigued me about the technique is that it doesn’t rely on any fancy algorithm, plug-in or rendering technique. Instead it uses displacement mapping to perturb the surface of the model and then motion-blurs the results of several displacements per frame to give the result. If the displacement is applied cyclically, i.e. it oscillates once per frame, then this is consistent over multiple frames and can even be used for animation. I’ve been having a play at doing this in blender and here are the results I’ve had so far:

For the truly interested, here’s a blendfile. More after the jump…

What seems to help in particular is applying a Kirsch filter in the compositor, which brightens the image slightly and also dilates the colours a bit to give a more painterly feel. I particularly like the effect it has at low subdivision levels – it gives a cubist sort of effect:

Rather a weird one: Looks like the brushstroke style used by Edvard Munch in The Scream. Except way out of control.

Here, a rough paint texture is mapped to the screen space coordinates, and affects the surface normals of the mesh, altering the lighting to give a really nice paint effect.

The second part of my steampunk style android project.

Trying to isolate a tileable pattern from a photo or sketch to use in your 2D and 3D projects can be a pain, and often involves tedious tracing of patterns by hand. I’ve come up with a method for generating tileable raster/vector/3D curve based patterns from photos that automates some of the tedious parts and gives good results, using the free and open source softwares GIMP, Inkscape, and Blender. For this tutorial I’ll be using one of the free textures from CGTextures.com:

Stage 1: GIMP

Our aim in the GIMP is to simplify the image as much as possible, so that later the automatic extraction of the pattern can be achieved with minimal input from us. This involves identifying the repeating unit of the texture and isolating it, followed by increasing the contrast between the different elements as much as possible. This is the result of this process, and shows a single repeating unit:

Step 1. Opening up the texture in the GIMP, we notice that there isn’t a part of the image that shows an entire repeating unit of the pattern. To solve this we duplicate the layer and place it under the original and move it until we can match the pattern up with the layer above once again. We repeat this until we have a full repeating unit. Don’t worry about being to tidy at this stage however, as we will clean up any rough edges later. In the image below the repeating unit is outlined in blue and the boundary of the original image marked by the red line. Once we have this repeating unit we can erase everything else. We’ll reconstruct the rest of the pattern by copying this single unit later.

Step 2. The next problem we have is that there is an underlying fabric texture that we don’t want interfering with out efforts to extract the main pattern.  To get rid of the underlying grain to the texture we use two filters in the GIMP. First, do a simple Gaussian blur (blur >  Gaussian blur from the filters menu) of around 6 pixels to even out some of the grain, followed by a Selective Gaussian blur (found in the same menu). Selective Gaussian blur only blurs pixels together if they are already quite similar and so it is ideal for evening out the different coloured areas without blurring the boundaries of the different parts of the pattern. Adjust the threshold and the blur radius until you have a nice balance of even colours within regions and clean edges between different parts of the pattern:

The selective Gaussian blur dialogue.

Step 3. To make the edges even cleaner, we now use the select by colour tool to select the different coloured parts of the pattern. By adjusting the threshold of the select by colour tool, and using the add and subtract modifiers (shift+click and ctrl+click respectively), you should be able to isolate a single coloured part of the pattern. Once we have this selection, we could simply use the fill tool to fill our selection with a flat colour. However, the results of this would still be messy, as we haven’t eliminated 100% of the grain from the image, and the borders of our selection are slightly wobbly. Instead we will use the convert selection to path tool in the paths dialogue to convert this selection to a much cleaner path, which we can then fill with a single colour. This also allows us to re-select the same areas later, or even stroke their outlines if we wish.

Step 4. Once we have our selections, then on a new layer we can fill them with a flat color. For the next step it is ideal to convert our image to grayscale, as we will be using Inkscape to convert the image to curves based on brightness. Thus we simply fill background with black, the outline part with 50% grey, and the dark central parts with pure white. After a small amount of cleaning up with the paint tool (use Ctrl+click to select colours from the image with the eyedropper, and paint over any problem areas), the result is the image shown at the beginning of this stage. We will save this as a .png file for the next stage.

Stage 2: Inkscape

Inkscape has an excellent tool that allows you to convert a raster image such as a .jpg or .png into vector format. We can then import the paths from this vector image into Blender. Because we have already done most of the hard work in the GIMP, this stage is easy. We simply import the .png image we made in the GIMP using File > Import and then open up the bitmap to path tool from the paths menu via Paths > Trace Bitmap:

Step 1. Since our image is in black and white, and only has three shades, the “Brightness Steps” option is ideal for converting our image into paths. We choose this options and set number of scans to  2, since the background colour of the document is the third colour. Then click ok.

Step 2. The result is our image, traced and converted into a group of paths. We can now drag it off to one side and then delete our original imported image, as we don’t need it anymore. Then select our new traced object and click ungroup  in the toolbar to split the different colours apart. Finally, click and drag to move each layer away from the others and save as a .svg file.

Stage 3: Blender

Now that we have our repeating unit in SVG path format, we can import it into blender to use however we please. From here you can use it to generate bitmap images that tile flawlessly, or as part of your next model or project. I’ll demonstrate how to import into blender and then create a tileable render, but really what you do with the results is up to you.

Step 1. Use File > Import > Paths to import the .svg file you created, select “Inkscape (.svg)” from the menu when prompted. This will create a blender Curves object from your paths. Go into edit mode (Tab) and select the rectangular outlines around each part (simply hover over it with your mouse and press “L”) and then delete them (x). Then box select one of the two halves (b) of the object and press P to separate them:

Step 2. To align the two objects on top of one another, select each in turn and use “centre new” from the edit buttons (press F9 to show them in the buttons window). Then use clear location (Alt+G) in object mode to place them both at the origin. If the offset between the two isn’t quite right, then just go into top view (Numpad 7) and tweak their locations, and then put their centres back at the origin by pressing Shift+C to reset the 3D cursor, selecting the two objects and doing “Centre Cursor” from the edit butons. Once this is done, try giving  bit of extrude to your two curves to make them easier to see. Also, you can set the resolution of the curves (the rather cryptic “DefResolU” slider in the edit butons panel) much lower than the default 24, since our imported curves already have a lot of points, start low and work up until you get nice, smooth looking curves for the most efficient results. I settled at around four.

Step 3. Now we want to repeat these objects over a regular grid to create our tileable pattern. To do this we’ll use dupliverts. Since our pattern repeats in a diamond arrangement, create a new plane in top view and in edit mode rotate it (r) 45 degrees. Subdivide the plane once (w > subdivide) and then return to object mode (Tab). Now select your curve objects and parent them to your newly created grid (select the curves, then the grid, and do Ctrl+p). Turn on the Dupliverts option for your grid object under Object Buttons (F7) and your pattern will now be repeated!

Our imported curves repeated over the grid.

Step 4. Select the grid and go back into edit mode and scale the grid in the x and y directions separately (s > x or s > y) to get the spacing between the repeats right. You can subdivide the grid further and scale it up to get more repeats if you want.

Step 5. Finally to render out a single repeatable tile you need to set up the camera just right. Create a new camera at the origin (space > add > camera in object mode) and move it up a few units. Then check “Orthographic” in the objects edit buttons. You now need to determine the correct scale so that the rendered image covers exactly one tile. To do this, select your grid and go into edit mode, and select the top and bottom vertices of a single square of the grid, press “f” to create an edge between them. Now check Edge Length in the Edit Buttons panel and the length of this edge will be shown on screen when it is selected. Select the camera and set it’s lens scale to this value under object buttons. Now the maximum dimension of the cameras view is this many blender units.

Step 6. In the render buttons panel (F10) set the y resolution to a convenient multiple of the value you measured in step 5. Then repeat Step 5 to get the width of one diamond in the grid and use this (multiplied by the same amount) as the x resolution of the render. If you now look through the camera you will see that a single repeated unit is now shown in the camera’s view. Set up your materials and lighting as you wish and  render – you will get a single tile of your texture! It should tile seamlessly too without any further modification!

A single tile of our repeating pattern. Rendered with simple flat materials and lit with ambient occlusion.

The same image, opened in GIMP and repeated with the "Tile" filter.

The same scene using simple black and white materials set to "shadeless" in the materials settings panel. This could be tiled and used as a bump map for example.

That’s it! There are plenty of other things you can use this tutorial for, so feel free to experiment, and please comment with any questions, comments, or suggestions you have!

Update: Watch this timelapse modelling video, which shows how I use a pattern created with this method, converted to a mesh, to repeat a pattern over a curved surface.

]]> http://bensimonds.wordpress.com/2009/07/06/creating-tileable-patterns-with-gimp-inkscape-and-blender/feed/ 5 bensimonds Wallpaper2 Wallpaper0048_S Wallpaper0048_ThreeCol Patterns2 SGBlur StoP Isc1 Traced Ungroup Paths Curves Curves2 Repeated Repeated2 Wallpaper4 Wallpaper3 Wallpaper5