Skip to content

Tag: Pixelart

My Free Charset version 3, one quadrillion of new chars

We Are Hiring

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.

gimp screenshot

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 2n different chars (2n-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. 😮

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.

My Free Tileset, version 9

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.

lab incident

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

cena princessa nhamnham

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

cena pier pixelart

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

free_tileset_version_9

Casa com os tiles livres

O Diogo_RBG, de Tocantins,  me enviou esse mapa que ele fez usando o conjunto de tiles que eu tenho postado regularmente no blog.

É uma bela casa, dois quartos, sala de estar, dois banheiros e sala de jantar conjugada com cozinha. 🙂

mapa do diogo

Aqui é ele em ação, funcionando, dentro da engine do The Mana World!

TMW

Eu aproveito pra divulgar o evento que ele participará falando de SDL, desenvolvimento de jogos e também mostrará esses tiles.

EDJA

Visitem também o blog dele e confiram seus excelentes tutoriais de como criar um MMORPG.

My Free Tileset, version 8

One more version of the my free tileset for game development. This little world is beautifully growing, now towards medieval themes. Now is already possible to imagine a typical day in a little rpg village:

tiny rpg village

And here the tileset, eighth version:

free tileset version 8

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.

My Free Tileset, version 7

Another version of the my free tileset project with a lot of improvements.

free tileset version 7

Examples of usage:

A hotel I did for helping me in a prototype.

Pixelart hotel

Outdoor scenario. A city.

pixelart city

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

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.

Game map edition using Tiled

Tiled logo

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).

map editor tiles tileset game deveopment

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.

Tiled: New Map

Like this one

tiled 10x10 map

Creating a tileset

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

batalhao tileset cc by sa

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.

tiled new tileset

Notice a new tab on the Tile palette section.

tiled tileset

Working with layers

Select the first grass tile from the tileset and select the  fill tool (bucket icon) to create a grass field. Use the paint tool (pencil 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”.

tiled 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 new 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.

tiled city

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.

JavaFX, easy use of tiles

Continuing my little JavaFX framework for game development, right now focused on use those tiles I’m drawing and posting here in my blog. This framework will be a group of classes for simplify and hide some complexities of common game development. Right now I wrote just a few of them.

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"
    }
}

tiles

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

bg tilemap

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]
}

things tileset

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]
    ]
}

tileroom

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

My Free Tileset, version 6

More free tiles for game developers. Now in a fantasy, medieval style.

tileset palace snes rpg style

Some detailed view. The royal throne (king was not in the room), carpet and banners.

tileset palace detail view 1

I had to place guards across the room. You know, being a king is dangerous.

tileset palace detail view 2

There’s this new kind of wall, with bricks. There’s a passage for the king bedroom.

tileset palace detail view 3

Here’s the new version of the tile set.

free tileset version 6