Winter 2013 Best Graphics Maker?

[First Spear]

I am using Windoze. I want to make graphics - backgrounds, play fields, moving cards/sprites, etc. I know there is a leap from the assembly code that actually renders this stuff and what I might draw. So.....

 

1. What is the recommended tool for drawing our favorite blocky graphics?

2. What is the process/pipeline for converting static images to Intv code?

3. What is the process/pipeline for converting a series of images to cards for animation?

 

Thanks.

[+DZ-Jay]

I'm afraid I can't be of much help if you're looking for a fancy toolkit. I draw all my graphics and animation frames in ASCII files. I have a set of Perl scripts I've created that rip scenes and sprites from the text files and generate the appropriate data structures used by my framework.

 

I then iterate through a quick "draw-build-test" cycle to see how it looks, perform any adjustments and go again. Here's an example of one such file; it describes the Christmas Carol title screen.

 

Sprites are done similarly, but they include multiple animation sequences and multiple frames per sequence. For instance, below is the part of the animation file for the Evil Snowman:

 

; =============================================================================
; SNOWMAN
; =============================================================================
; NOTE:
;   Each 8x16 tile must be composed of the '.' and '#' characters, which will
;   be interpreted as 0 and 1, respectively.
;
;   Each 16-line row defines an animation sequence for a sprite.  A name for
;   each sequence can be defined as a row label by prefixing it with a double
;   at-sign "@@" followed by the name.  This label must start at the first
;   column of a line.  For example:
;
;   (First column)
;       |
;       |
;       v
;       @@Horiz
;       :0
;       ...##...
;       ..####..
;       .######.
;       .######.
;       ########
;       ########
;       ########
;       ########
;       ########
;       ########
;       ########
;       ########
;       .######.
;       .######.
;       ..####..
;       ...##...
;
;
;   Only one label is permitted per row.  If more than one label is found
;   before a row, all will be discarded except the last one.
; =============================================================================
; Copyright (c) 2010-2012 James Pujals (DZ-Jay)
; =============================================================================

@@Horiz:
:0       :1       :2       :3       :4       :5       :6       :7       :8       :9
..####.. .####... ........ ........ .####... ..####.. ...####. ........ ........ ...####.
.######. ######.. .####... .####... ######.. .######. ..###### ...####. ...####. ..######
.#.#.##. #.#.##.. ######.. ######.. #.#.##.. .#.#.##. ..#.#.## ..###### ..###### ..#.#.##
.######. ######.. #.#.##.. #.#.##.. ######.. .######. ..###### ..#.#.## ..#.#.## ..######
.##..##. ##..##.. ######.. ######.. ##..##.. .##..##. ..##..## ..###### ..###### ..##..##
..##.#.. .##.#... ##..##.. ##..##.. .##.#... ..##.#.. ...##.#. ..##..## ..##..## ...##.#.
.######. .#####.. .####... .####... .#####.. .######. ..#####. ...####. ...####. ..#####.
.##.###. .#.####. .######. .######. .#.####. .##.###. .###.##. .######. .######. .###.##.
######## ######## ##.##### ##.##### ######## ######## ######## #####.## #####.## ########
###.#### ##.##### ######## ######## ##.##### ###.#### ####.### ######## ######## ####.###
######## ######## ##.##### ##.##### ######## ######## ######## ####.### ####.### ########
###.#### ###.#### ######## ######## ###.#### ###.#### ###.#### ######## ######## ###.####
######## ######## ###.#### ###.#### ######## ######## ######## ###.#### ###.#### ########
.######. .######. ######## ######## .######. .######. .######. ######## ######## .######.
.######. .######. .######. .######. .######. .######. .######. .######. .######. .######.
..####.. ..####.. ...####. ...####. ..####.. ..####.. ..####.. .####... .####... ..####..

; ...

@@Melt
:0       :1       :2       :3       :4       :5       :6       :7       :8       :9
...####. ........ ........ ........ ........ ........ ........ ........ ........ ........
..#.#.## ..###### .....#.. .....#.. ........ ........ ........ ........ ........ ........
..#.#.## ..#.#.## ..###### ........ .....#.. ........ ........ ........ ........ ........
..###### ..#.#.## .##.#.## .####### ........ ........ ........ ........ ........ ........
..##..## ..##..## ..#.#.## ###.#.## .####### .....#.. ........ ........ ........ ........
...#..#. ...#..#. ...#..## #.#.#.## ###.#.## ..#.##.. ........ ........ ........ ........
..#####. ..#####. ..#####. ..###### #.#.#.## .####### .....#.. ........ ........ ........
.###.##. .###.##. .###.##. .###.##. .###.### ###.#.## ..#.##.. ........ ........ ........
######## ######## ######## ######## ######## ###.#.## .##.#.#. ....#... ........ ........
####.### ####.### ####.### ####.### ######## .######. .##.#.## ..###... ....#... ........
######## ######## ######## ######## ####.### ####.### ######## .##.#.#. ..#####. ........
###.#### ###.#### ###.#### ###.#### ######## ######## ######## .##.#.#. ..#.#.#. ....#...
######## ######## ######## ######## ###.#### ###.#### .###.##. .######. .##.#.#. ..####..
.######. .######. .######. .######. .######. ######## ######## ######## .####### ..#.#.#.
.######. .######. .######. .######. .######. .######. ###.#### ######## ######## .##.#.##
..####.. ..####.. ..####.. ..####.. ..####.. .######. .######. ###.#### ###.#### ########

I tried using sprite designers and even graphic programs, but I found I could be more productive with this manual, close to the metal, process.

[+DZ-Jay]

By the way, if you think those ASCII files make it difficult to visualize the design, it's not quite bad. I use syntax highlighting in my text editor, which helps in putting the image into visual context.

 

This is what I see:

 

It's not too hard to see the Christmas tree and the presents in that scene.

[+DZ-Jay]

Oh, and this may not help you with your quest, but I think it's fun to watch: I took a screenshot after every single minute change I made, and put them together in the video to show the iterative process.

 

http://vimeo.com/54165189

[intvnut]

I personally use Gimp ( www.gimp.org , available for many platforms, including WIndwos ) to flatten / edit images. I actually draw the final image in vi as a giant text file / ASCII art, and use some custom perl scripts to boil it down to data.

 

Sometimes, I use the gfx and wgfx macro set I include with SDK-1600.

[+DZ-Jay]

I personally use Gimp ( www.gimp.org , available for many platforms, including WIndwos ) to flatten / edit images. I actually draw the final image in vi as a giant text file / ASCII art, and use some custom perl scripts to boil it down to data.

 

 

Oh, yes, that works. I used that technique for a photo of my wife I created as an Intellivision scene. GIMP has a filter that basically pixellates the entire image, it was a matter of processing the image through that filter with very blocky pixels, and adjusting the colour palette to a very limited set. Then, like you, manually translating the image as an ASCII file. Except I use TextMate instead of vi.

 

The results were not that bad. And if I squint my eyes just right, it almost seems as if the entire process could be automated by processing images systematically. I just could never be bothered to create a program for it.

 

-dZ.

[First Spear]

Oh, and this may not help you with your quest, but I think it's fun to watch: I took a screenshot after every single minute change I made, and put them together in the video to show the iterative process.

 

http://vimeo.com/54165189

 

Dat is geweldig!

 

Awesome stuff. Thanks for sharing that!

[First Spear]

I personally use Gimp ( www.gimp.org , available for many platforms, including WIndwos ) to flatten / edit images. I actually draw the final image in vi as a giant text file / ASCII art, and use some custom perl scripts to boil it down to data.

 

Sometimes, I use the gfx and wgfx macro set I include with SDK-1600.

 

Thanks for sharing that. That is great info. I was/am hoping that I can open an image in a "paint" program and then convert that with minimal friction into something on the Intv. Thanks.

[intvnut]

 

Thanks for sharing that. That is great info. I was/am hoping that I can open an image in a "paint" program and then convert that with minimal friction into something on the Intv. Thanks.

 

BTW, I lean on GIMP's "layers" feature rather heavily when trying to adjust imagery.

 

I'll typically make a top-level layer with transparency, and then use Filters => Render => Pattern => Grid to render an 8x8 grid (with offset 0, 0) on that layer. (I pick a color that won't be elsewhere in my image, like hot pink or fluorescent green.) I then adjust the layer opacity so that I can see through the grid and edit the image underneath.

 

By keeping track of the 8x8 cell boundaries, you can make subtle adjustments that retain the character of the image, but fit better within the grid structure. A pixel here or there can really add up in terms of how many GRAM slots you need to represent an image.

 

Layers also help when composing an image out of a combination of background tiles and MOBs. Use the background layer to store the image, and intermediate layers to hold the MOBs.

 

I usually leave GIMP in RGB mode, not indexed mode for all my editing (mainly so I can set up the grid I mentioned above). The downside is that the default tool behavior then assumes you can support any shade of any color. So, for your graphics editing needs, I'd stick to the pencil tool for drawing, and set the eraser tool to "hard edge".

[+cmart604]

 

BTW, I lean on GIMP's "layers" feature rather heavily when trying to adjust imagery.

 

I'll typically make a top-level layer with transparency, and then use Filters => Render => Pattern => Grid to render an 8x8 grid (with offset 0, 0) on that layer. (I pick a color that won't be elsewhere in my image, like hot pink or fluorescent green.) I then adjust the layer opacity so that I can see through the grid and edit the image underneath.

 

By keeping track of the 8x8 cell boundaries, you can make subtle adjustments that retain the character of the image, but fit better within the grid structure. A pixel here or there can really add up in terms of how many GRAM slots you need to represent an image.

 

Layers also help when composing an image out of a combination of background tiles and MOBs. Use the background layer to store the image, and intermediate layers to hold the MOBs.

 

I usually leave GIMP in RGB mode, not indexed mode for all my editing (mainly so I can set up the grid I mentioned above). The downside is that the default tool behavior then assumes you can support any shade of any color. So, for your graphics editing needs, I'd stick to the pencil tool for drawing, and set the eraser tool to "hard edge".

You're alive! We miss you.

[Pset]

From Gimp export to XPM format, open it in a text editor and zoom out(shrink the font size) and you will see the ascii version of your image with an index of the character/color set up.
You can manipulate this data in a lot of ways.A script should be able to turn most images into the data called for in those examples above.

[catsfolly]

I had good luck using TileStudio to take existing graphics and create the characters and character maps needed to import them into the Intellivision.

 

See this thread for details:

 

http://atariage.com/forums/topic/205355-fun-with-tile-studio-creating-the-paddle-party-title-screen/

 

Catsfolly

 

[GroovyBee]

Another vote for TileStudio. I've used it on several projects. Most recently the 16 levels in Hover Bovver were designed in it. TileStudio does have some quirks and so I'd recommend that you save your work regularly.