Grafixator Editor

The grafixator editor was designed with ease of use and simplicity in mind. However, to get started it is recommended to have a quick read of the relevant sections:

1. Editing Modes
2. Generating Random Graphics
3. Using the Graphics Library
4. Tiles Toolbar – Tools
   • Filters
   • Hero
   • Properties
5. Tile Layers
6. Adding TimeLines
7. Box2d Lights
8. Box2d
9. Parallax backgrounds
10. Particle Effects
11. Import & Export functions
12. Saving grafixator Files
13. Keyboard – Keys & Shortcuts

 

Editing Modes

There are 2 basic Editing Modes, ‘Tiles‘ for adding tiles to your map or ‘Imgs‘/’Anim‘ for adding sprites. In Tiles mode your selected tiles are displayed in the Tileset window. In ‘Imgs‘/’Anim‘ mode your selected images/animations are displayed but scaled to a 64×64 icon.

Imgs mode is similar to Tiles mode as random images are generated, except in Imgs modes, sprites are added and you can choose different sizes (other than the tile width/height). In Anim mode animations are generated from the Animation Library.

Tip: By default, when adding Sprites or Animations sprites are snapped to the bottom left. Sprite snapping can be changed in the Settings Window (Settings button in toolbar!).

Note: In grafixator all tiles are rendered using the Libgdx Tiled Renderer. All other sprites (images, animations and tiles with properties) are rendered separately directly after the collision layer.

Generating Random Graphics

Generating random graphics is easy. Click the ‘Next >>‘ button and your new page of random images is generated immediately. Keep on clicking this button until you find graphics you like and want to use. The ‘Cols‘ button allows you to select up to 12 custom colours or choose random colours. The Border button allows you to set the border width.

Using the Graphics Library

Grafixtor provides a library of many predefined images and animations you can use in your game.

When you are in Tiles or Imgs mode try out all the different library items and click the ‘Apply‘ button. Click the ‘Next >>‘ button to generate new shapes. You may also configure the colours and alpha of these shapes and in Imgs mode you can also change the image width and height.

In Anim mode a selection of predefined animations are available as well as some open source ones (Open Bundle and SpriteLib). When scrolling through the animations grafixator applies some random filters to them, which may or not look great. The original animation image is always maintained in the top left image.

To return to randomly generated images click the Random button in the bottom toolbar.

Tiles Toolbar – Tools

The tiles toolbar allows you to perform actions on your tiles, from left to right:

1. Duplicate Tile. Select a tile and click to duplicate.
2. Tile Merge. Hold down the <CTRL> key and click on 2 tiles. Click this button to open the Tile merge Window.
3. Macro Draw. Hold down the <CTRL> key and click on 2 tiles. Click this button to open the Macro Draw Window. This allows you quickly draw 1 tile relative to another.
4. Tile Delete. Self explanatory really, deletes a tile.
5. Rotate left and right. Rotates a tile 90 degrees clockwise or anti-clockwise. Doesn’t work if the tile width and height differ.

Note When in Imgs or Anim mode the tool bar displays Z-Ordering buttons to allow you to modify the Z-Order (order in which they get rendered).

Tiles Toolbar – Filters

Apply 2D filters on any tile, image or animation. Many to choose from, mostly from the excellent JHLabs.

The Filters window displays your original image on your left, and on the right the image after applying the filter. Quickly try out all the available filters and their settings and if you like one, click the Apply button and the filter is applied immediately to each tile, sprite or animation in your game.

Tiles Toolbar – Hero

Sets your chosen tile, image or animation as the main controllable character and opens pop-up windows to configure movement/camera/fire options. Any previous Hero character is overwritten.

Here you can choose from many movement types, camera control (vertical/horizontal auto scrolling, centered, none, view port), player fire options and some basic options on how to handle collisions.

Tiles Toolbar – Props

Allows you to choose from a list of predefined properties or set your own custom tile properties for any tile, image or animation.

Many predefined properties, for example, using properties you can attach and configure Box2d Lights, set Box2d Properties to a sprite, set sprite rotation, set your bullet texture, destructable sprites, make a sprite a pickup, configurable enemy fire etc.

Note that if you assign any property to a Tile, the tile is removed from the tiled map and rendered separately with all the images/animations.

Tile Layers

Grafixator supports multiple tile layers. By default grafixator creates 2 tile layers for each game. Grafixator generates collision rectangles for every tile in the Collision Layer, so you should use this layer to draw collidable walls, platforms etc. Other backgrounds and non-collidable objects should be placed in other layers. The collision layer cannot be deleted.

As mentioned above, all other sprites (images, animations) are rendered directly after the Collision Layer, so bear this in mind if you are designing a game in which the Z-Ordering of Tiles, Sprites is important.

Adding TimeLines

TimeLines can only be added to Images or Animations. Selecting a Tile will have no affect, so ensure you are in Imgs‘ or ‘Anim‘ mode before attempting to apply a timeline. When the TimeLine button is clicked all sprites with an existing timeline will be outlined by a Rectangle.

Once the timeline has added, you may edit the Global Settings, such as speed, TimeLine Tween Function, or edit a timeline event (and add a waypoint for example, or event specific settings).

Box2d Lights

Box2d Lights are set as tile/sprite properties. Select your tile or sprite and click the Props button and add the ‘Box2d Lights’ property. Here you can configure the light type (point or cone) with appropriate ray colour, distance, angles etc.

For further Box2d Lights configuration click the ‘Settings‘ button. Here you there are further options for Shadows, Blur and Diffuse Light. Enabling shadows darkens your game and only sprites with Box2d Lights are visible.

Tip: Box2d Lights can also be applied to Player or Enemy Bullets for cool bullet effects and also when Cone Lights are used in conjunction with the ‘Rotate’ property you can create nice looking spot lights.

Box2d

Box2d properties are set as with other properties. Select your tile or sprite and click the Props button and add the ‘Box2d’ property. Here you can configure the shape (Rectangle or Circle) and the friction, restitution.

For further Box2d configuration click the ‘Box2D‘ button in the main toolbar. Here you there are further options such as Gravity. In the main toolbar you can also select the ‘Debug Box2d’ option, which draws an outline around all your Box2d Shapes.

Parallax backgrounds

Grafixator supports up to 3 backgrounds. Load backgrounds using the + button.

Once loaded, the 2nd button allows you to set the Background Properties (Repeat-X, Repeat-Y, Horizontal and Vertical Speed). Backgrounds are loaded to the bottom left of your map, so use the move button to move them around. The other buttons should be self explanatory, the arrows move alter the Z-Order and the bin button removes the background.

Particle Effects

By default, grafixator generates particle effects for bullet/wall collisions, for pickups, for explosions (sprites/tiles with destructible property) and when an enemy bullet hits your hero. In each of these cases the same sprite texture is used in the particle effect (bullet, pickup, destructible sprite or hero texture).

To turn off particle effects, or to change the configuration use the grafixator settings window (Settings button in the main toolbar).

Experimenting with the 3 configurable parameters (#Particles, Gravity and Velocity) can give some nice effects.

Import & Export functions

Grafixator has various Import and Export functions. Click the I or E buttons on the top toolbar.

Import

1. Import SpriteSheet Import your own tiles. The width and height of the tilesheet much match the widthand height you initially chose when creating your game.
2. Import Animation Importing for an animation in the form of a spritesheet. Currently only supports up to 16 frames and all animation frames must be in 1 row.
3. Import Image Allows importing of a single image.

Export

1. TMX Export Export your map to TMX format. Grafixator exports all TMX data with csv encoding.
2. Export Spritesheet Export your current tilesheet as a .png file.

Saving grafixator files

Grafixator files are saved in XML format. All tiles are saved as a .png spritesheet, and if your game includes other sprites or animations a further .png spritesheet is saved.

Note: Backgrounds are not saved, the XML file contains the relative path to the background(s) you included. Bear this mind when using the Grafixator API. i.e. Save your backgrounds in the same folder as your grafixator file.

Keyboard – Keys & Shortcuts

Editing

Keys(s)	Action
Cursors	Move around Map (hold down <CTRL> to move faster).
<CTRL>- Z	Undo last action.
+ , -, 0	Zoom In, Out and Reset

Playing (Play Mode)

Keys(s)	Action
W,A,S,D	Up, Left, Down and Right.
<RETURN>	Fire (If player fire enabled).
<SHIFT>	Thrust (Spaceship games)
r	Reset hero to its original position.
Escape	Quit play mode and return to editing.