Here is a useful tip on Python XML decoding.

I was extending xml.sax.ContentHandler class in a example to decode maps for a Pygame application when my connection went down and I noticed that the program stop working raising a exception regarded a call to urlib (a module for retrieve resources by url). I noticed that the module was getting the remote DTD schema to validate the XML.

<!DOCTYPE map SYSTEM "http://mapeditor.org/dtd/1.0/map.dtd">

This is not a requirement for my applications and it’s a huge performance overhead when works (almost 1 second for each map loaded) and when the applications is running in a environment without Internet it just waits for almost a minute and then fail with the remain decoding. A dirty workaround is open the XML file and get rid of the line containing the DTD reference.

But the correct way to programming XML decoding when we are not concerned on validate a XML schema is just the xml.parsers.expat. Instead of using a interface you just have to set some callback functions with the behaviors we want. This is a example from the documentation:

import xml.parsers.expat
 
# 3 handler functions
def start_element(name, attrs):
    print 'Start element:', name, attrs
def end_element(name):
    print 'End element:', name
def char_data(data):
    print 'Character data:', repr(data)
 
p = xml.parsers.expat.ParserCreate()
 
p.StartElementHandler = start_element
p.EndElementHandler = end_element
p.CharacterDataHandler = char_data
 
p.Parse("""<?xml version="1.0"?>
<parent id="top"><child1 name="paul">Text goes here</child1>
<child2 name="fred">More text</child2>
</parent>""", 1)

The output:

Start element: parent {'id': 'top'}
Start element: child1 {'name': 'paul'}
Character data: 'Text goes here'
End element: child1
Character data: '\n'
Start element: child2 {'name': 'fred'}
Character data: 'More text'
End element: child2
Character data: '\n'
End element: parent

import pygame, random
from pygame.locals import *
 
class Char(pygame.sprite.Sprite):
	x,y = (100,0)
	def __init__(self, img, frames=1, modes=1, w=32, h=32, fps=3):
		pygame.sprite.Sprite.__init__(self)
		original_width, original_height = img.get_size()
		self._w = w
		self._h = h
		self._framelist = []
		for i in xrange(int(original_width/w)):
			self._framelist.append(img.subsurface((i*w,0,w,h)))
		self.image = self._framelist[0]
		self._start = pygame.time.get_ticks()
		self._delay = 1000 / fps
		self._last_update = 0
		self._frame = 0
		self.update(pygame.time.get_ticks(), 100, 100)
 
	def set_pos(self, x, y):
		self.x = x
		self.y = y
 
	def get_pos(self):
		return (self.x,self.y)
 
	def update(self, t, width, height):
		# postion
		self.y+=1
		if(self.y>width):
			self.x = random.randint(0,height-self._w)
			self.y = -self._h
 
		# animation
		if t - self._last_update > self._delay:
			self._frame += 1
			if self._frame >= len(self._framelist):
				self._frame = 0
			self.image = self._framelist[self._frame]
			self._last_update = t
 
SCREEN_W, SCREEN_H = (320, 320)
 
def main():
	pygame.init()
	screen = pygame.display.set_mode((SCREEN_W, SCREEN_H))
	background = pygame.image.load("field.png")
	img_orc = pygame.image.load("orc.png")
	orc = Char(img_orc, 4, 1, 32, 48)
	while pygame.event.poll().type != KEYDOWN:
		screen.blit(background, (0,0))
		screen.blit(orc.image,  orc.get_pos())
		orc.update(pygame.time.get_ticks(), SCREEN_W, SCREEN_H)
		pygame.display.update()
		pygame.time.delay(10)
 
if __name__ == '__main__': main()

Here is it working:

Uptade: I put this source and images at the OpenPixel project in Github

Direct link to video: simple_space_effect_01.ogv

We set some constants like the screen size and the number N of star we want.

N = 200
SCREEN_W, SCREEN_H = (640, 480)

Using list comprehension we create a list of random points in the screen, that will be our stars. The size of this list is N.

stars = [
  [random.randint(0, SCREEN_W),random.randint(0, SCREEN_H)]
  for x in range(N)
]

Each star is represented by one tuple on the stars list. The first star is on stars[0] and is a touple with [x, y] positions.

At each step from the game loop we draw and update the position of each star. A star is draw as a white line of one pixel. See the pygame.draw.line doc.

for star in stars:
  pygame.draw.line(background,
    (255, 255, 255), (star[0], star[1]), (star[0], star[1]))
  star[0] = star[0] - 1
  if star[0] < 0:
      star[0] = SCREEN_W
      star[1] = random.randint(0, SCREEN_H)

In this example we update the position of a star by decreasing its horizontal position. When the horizontal position is less than zero, it’s not displayed on the screen anymore so we replace its horizontal position (star[0]) by the screen width (SCREEN_W) and the vertical position (star[1]) by a new random position. This will be like create a new star and guarantee always a different pattern of sliding stars.

The complete code:

#!/usr/bin/env python
 
# A simple effect of sliding stars to create a deep space sensation.
# by Silveira Neto <me@silveiraneto.net>
# Free under the terms of GPLv3 license
# See http://silveiraneto.net/2009/08/12/pygame-simple-space-effect/
 
import os,sys,random
import pygame
from pygame.locals import *
 
# Constants 
N = 200
SCREEN_W, SCREEN_H = (640, 480)
 
def main():
	# basic start
	pygame.init()
	screen = pygame.display.set_mode((SCREEN_W,SCREEN_H))
	pygame.display.set_caption('Simple Space Effect by Silveira Neto')
 
	# create background
	background = pygame.Surface(screen.get_size())
	background = background.convert()
 
	# generate N stars
	stars = [
		[random.randint(0, SCREEN_W),random.randint(0, SCREEN_H)]
		for x in range(N)
	]
 
	# main loop
	clock = pygame.time.Clock()
	while 1:
		clock.tick(22)
		for event in pygame.event.get():
			if event.type == QUIT:
				return
			elif event.type == KEYDOWN and event.key == K_ESCAPE:
				return
		background.fill((0,0,0))
		for star in stars:
			pygame.draw.line(background,
				(255, 255, 255), (star[0], star[1]), (star[0], star[1]))
			star[0] = star[0] - 1
			if star[0] < 0:
				star[0] = SCREEN_W
				star[1] = random.randint(0, SCREEN_H)
		screen.blit(background, (0,0))
		pygame.display.flip()
 
if __name__ == '__main__': main()

As usual is just little improvements over the last version. This time I added some geography elements. It’s now possible to create little levels and simple island.

Tons of new chars. I’ll not release them individually anymore because now I’m using just one XCF multilayer Gimp file that permits create  of new char combinations, so I’ll be releasing this file instead.

Mathematically, let’s assume I have just one layer. This permits create just one character (the nude one), ok? Each new layer I create, earrings as example, permits me create all chars I have done before with and without those earrings. That’s 2 times what we had before. With N layers I can create 2ⁿ different chars (2ⁿ-1? No, a char made of no layers can be the invisible man:)). We have now about 50 layers so we can create more than one quadrillion different combinations of chars. :o

Here’s the XCF Gimp file, chars.xcf (430Kb). To open and edit it you need the Gimp editor (The GNU Image Manipulation Program, download it here).

It’s also easier for you create your owns characters (try create yourself) or add hats, accessories, cloths, etc. Our My next step is write it to be programmability done with the same idea.

]]> http://silveiraneto.net/2009/04/14/my-free-charset-version-3-one-quadrillion-of-new-chars/feed/ 8 http://silveiraneto.net/2009/04/06/my-free-tileset-version-9/ http://silveiraneto.net/2009/04/06/my-free-tileset-version-9/#comments Mon, 06 Apr 2009 13:27:26 +0000 Silveira http://silveiraneto.net/?p=2464 More scenes and tiles for the free and open pixelart tileset. Also new monsters and characters but these will be showed in more details in another post.

Scientists discovery that they can’t keep a Gjelly (one of the new monsters) in cages.

And also a little medieval scene. A naive princess got a Nhamnham monster as her pet.

A new village scene, now with a pier, water, fence and new chars.

There’s a plenty of new tiles. Now that we have a good basic tiles becomes easy to add more tiles.

And here the tileset, eighth version:

Changelog:

• Medieval straw roof house and variations with and without signs, window, chimney and flowers.
• Signs for weapons, potions and armor store and for hotel.
• More vegetations.
• A dirt road.

Examples of usage:

A hotel I did for helping me in a prototype.

Outdoor scenario. A city.

Another outdoor scenario. A warrior (unpublished character here) walking in a forest.

Changelog:

• Reorganization of tile positions. Now they are all in a 32×32 grid.
• Shelf of drinks, two tables and chairs.
• I placed some characters in this tileset just to help during the creation of prototypes. They should not be really used in maps.
• Now is possible to create also outdoors scenarios:
  • Two buildings, streets, pedestrian crossing, sidewalks and a manhole cover.
  • A tree, cut tree and a bush.

Tiled is general purpose game map editor, with support of several map formats (XML, JSON), multi plataform and runs installed or from browser, supports plugins to read and write others map formats and all free (under GPL license).

Installing

You can lauch Tiled via Java Web Start or download it’s lastest version zip file. After download it just unzip it and run:

java -jar tiled.jar

Make sure you have at least Java 1.5 installed and configured.

Creating a empty map

After lauching it, open the menu File → New and create a new 10×10 orthogonal map with 32×32 tiles.

Like this one

Creating a tileset

Now we need to add a tileset to start drawing a map. Let’s use this one

Save the tileset image above.  Open the menu Tilesets → New Tileset select Reference tileset image and browser to find the tileset image you saved. Keep tile width and height as 32 and tile spacing and margin as 0.

Notice a new tab on the Tile palette section.

Working with layers

Select the first grass tile from the tileset and select the  fill tool ( icon) to create a grass field. Use the paint tool ( icon) to add some stones and trees at random locations on grass. On the Layers section double click at Layer Name and put a name like “field”.

Now let’s create another layer to put the buildings and streets. We can do that by opening the menu Layer → Add Layer or just clicking the icon on layer’s section. Let’s call it “city”.

Now build your city by selecting tiles on the palette and using the paint tool. There’s tiles for horizontal and vertical street and all kinds of intersection. For the building you can click and drag in the palette to select multiple tiles at once.

Saving

You can save the map as tmx (XML Tiled map file) , JSON, LUA, wlk, map (Mappy) or export it as a image. There’s some options accessible on the Edit → Preferences menu like use base-64  gziped encoding.

Thanks to Adam Turk and Bjørn Lindeijer for developing that great project.

In a next post I want to show how to integrate this with a Java/JavaFX game.

Use

We create a tileset from the files.png file that way

var tileset = Tileset {
    cols: 15 rows: 10 height: 32 width: 32
    image: Image {
        url: "{__DIR__}tiles.png"
    }
}

Tileset are orthogonal, distributed into a grid of cols columns and rows rows. Each tile have dimensions height x width.

A Tileset is used into a Tilemap

var bg = Tilemap {
    set:tileset cols:5 rows:5
    map: [8,8,8,8,8,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]
}

That shows

Each number in the map represents a tile in the tilemap. Number 0 means the first tile at the upper left corner, numbers keep growing from left to right columns, from top to bottom rows.

Another example

var things = Tilemap {
    set:tileset cols:5 rows:5
    map: [80,55,56,145,145,96,71,72,61,62,0,0,0,77,78,122,0,0,93,94,138,0,0,0,0]
}

A tilemap can also contains more than one layer

var room = Tilemap {
    set:tileset cols:5 rows:5 layers:2
    map: [
        [8,8,8,8,8,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
        [80,55,56,145,145,96,71,72,61,62,0,0,0,77,78,122,0,0,93,94,138,0,0,0,0]
    ]
}

Implementation

The Tileset class basically stores a Image and a collection of Rectangle2D objects, for be used as viewports in ImageView classes.

import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.geometry.Rectangle2D;
 
public class Tileset {
    public-init var      image: Image;
    public-init var      width: Integer = 32;
    public-init var     height: Integer = 32;
    public-init var       rows: Integer = 10;
    public-init var       cols: Integer = 15;
    protected   var       tile: Rectangle2D[];
 
    init {
        tile =  for (row in [0..rows]) {
            for (col in [0..cols]) {
                Rectangle2D{
                    minX: col * width, minY: row * height
                    height: width, width: height
                }
            }
        }
    }
}

The Tilemap is a CustomNode with a Group of ImageViews in a grid. The grid is mounted by iterating over the map as many layers was defined.

public class Tilemap extends CustomNode {
    public-init var   rows: Integer = 10;
    public-init var   cols: Integer = 10;
    public-init var    set: Tileset;
    public-init var layers: Integer = 1;
    public-init var    map: Integer[];
 
    public override function create(): Node {
        var tilesperlayer = rows * cols;
        return Group {
            content:
                for (layer in [0..layers]) {
                    for (row in [0..rows-1]) {
                        for (col in [0..cols-1]) {
                            ImageView {
                                image: set.image x: col * set.width y: row * set.height
                                viewport: set.tile[map[tilesperlayer*layer + row*rows+col]]
                            }
                        }
                    }
                }
        };
    }
}

Next steps

• Integrate to a map editor
• Support some XML map format
• Sprite classes for animation
• Integrate those collision detection classes I posted before

Download

• Source code and NetBeans project, tileworld.tar.bz2.