Jump to content
IGNORED

7800basic for Newbies: A Tutorial, Part 2


Atarius Maximus
 Share

Recommended Posts

Tutorial Contents:

 

Part 1:

 

Setting up your Development Environment

 

Part 2:

 

Creating Graphics

 

Creating a Title Screen

 

Sprite Creation & Displaying Them on the Screen

 

Part 3:

 

Getting Started with Writing the Code

 

Adding Player Sprite Movement and Gun firing

 

Moving Non-Player Sprites on screen

 

Collision Detection between gunfire and Non-Player Sprites

 

Adding a Status bar with the Score and Lives Remaining

 

Collision Detection between all Sprites, Speed Change on clearing screen

 

Animation, Sound Effects, and Performance Troubleshooting

 

Adding a High Score

 

Code Optimization, More Animation, and Holey DMA

 

 

AtariVox Speech

In this section I'll be covering setting up the color palette in Gimp, basic image creation & editing with Gimp, and creating a playfield map file.

 

Creating Graphics

 

Graphics are a little tricker with the 7800basic than with 2600 batariBasic because there are multiple modes to choose from, and you’re creating actual bitmapped graphics rather than just entering 1’s and 0’s into your code. The most common graphics mode is 160A, it allows for 3 colors per sprite and is the native mode (there are no strange restrictions). It uses the lower 160x192 resolution. I chose the high resolution 320A mode for Dungeon Stalker to get the higher 320x192 resolution, but it limits you to single color sprites.

 

As we get started working with image files, my tip would be to open graphic images from RevEng's samples and modify them, they are already formatted correctly and is what I did when I got started. Modifying the graphics in a regular graphic editor won't work, because they will be saved with the wrong color palette and 7800basic will complain and crash when you go to compile. I did a quick tutorial how to set up the 7800 color palette in Gimp here, however I’m going to start over in this tutorial as I may add a few more details here and there.

 

Before we start, you should be aware that the 7800’s graphics chip, MARIA, is capable of 3 graphic display modes: 160A, 320A, and 320B. Each of these graphic modes is capable of displaing sprites or characters in the display mode’s regular format or in it’s alternate format. In addition, MARIA is equipped with 8 adjustable 3-color palettes. A sprite or character can be drawn using any one of these palettes. You can set the mode with ‘displaymode <value>’ near the beginning of your code. It can only be set once.

 

160A/B modes have no restrictions, and are generally the most commonly used:

160A: 160x192, 3 colors

160B: 160x192, 12 colors

 

320A and 320B allow for higher resolution images. In 320C mode, even pixel pairs use the first two colors in the palette, and odd pixel pairs use the last two colors in the palette. 320B mode requires pairs of pixels to use the same palette. 320D requires pixels in odd columns to use the first two palette colors, and pixels in even columns to use the last two palette colors.

320A: 320x192, 1 color (320C has 3 colors)

320B: 320x192, 3 colors (320D has 3 colors)

 

Setting up the 7800 color palette in Gimp

 

 

You should already have Gimp installed from the previous section, but if you don’t go ahead and download it here. You should also have already downloaded the 7800 pallete file, but if not grab it here. After you launch Gimp, our first step is to open the palette file image. Note that I’m using Gimp for Windows, version 2.8.22.

 

post-2143-0-80971700-1505847302.png

 

Open the palette file “atari256.png” by going to File | Open Image:

 

post-2143-0-39396700-1505847331.png

 

 

Next, click on Windows | Dockable Dialogs | Palettes. We need the Palettes dialog box to be open for the next step.

 

post-2143-0-44853700-1505847372.jpg

 

 

Next, right click anywhere inside the palettes dialog box to pull up the popup menu. Click on the “Import Palette” menu option.

 

post-2143-0-07521600-1505847393_thumb.png

 

Once the window is open, click on Image, Palette name (rename to Atari7800), and click on Import.

 

post-2143-0-97197800-1505847421_thumb.png

 

Nex we’ll want to change the Index mode. Click on Image | Mode | Indexed.

 

post-2143-0-33217300-1505847447_thumb.png

 

Next we need to change the number of colors in the palete. Click on Generate Optimum Palette and change the number to 13, then click on convert.

 

post-2143-0-86865500-1505847471_thumb.png

 

Change setting back to RGB, just so we can go back and change it to Indexed again to make one more modification...

 

post-2143-0-46328100-1505847498_thumb.png

 

Click on Image | Mode | Indexed again to make one more change.

 

post-2143-0-56881300-1505847518_thumb.png

 

Click on Use custom palette, then the button next to it, then click on the 7800palette that was just added and click convert.

 

post-2143-0-45305900-1505847541_thumb.png

 

Click on File | Open, image, and open the tileset_rocks image from RevEng's plotmapfile sample that’s included in the distribution. In my case, the file is located at C:\78b\samples\plotmapfile\gfx\tileset_rocks.png. Once you have it open, zoom in so you can actually see what you’re doing. The image is only 48x26 pixels in size, so viewing it at 100% makes it too tiny to actually use. I generally increase the zoom level to 800%, that works well with the native resolution of my laptop. You will likely need to resize the window so you can see the entire image on the screen at once.

 

post-2143-0-45392300-1505847563.png

 

Here is the file resized to 800%. Note that the visible area of the image that will be used in our 7800basic program is only the top portion, the bottom 10 vertical pixels are simply for reference in sizing and picking colors when editing the image. In addition, the actual colors that you use in the image are actually inconsequential, you just need to pick four different colors from the palette. The actual colors that are displayed on screen are configurable within your 7800basic code.

 

 

post-2143-0-74506600-1505847595.png

 

Now we can modify the file to use in a 7800basic program. Let’s make an edit! First, we’re going to need our brush to be much smaller, the default brush is 20 pixels wide, we need it set to 1. Go to Windows | Dockable Dialogs | Brushes, as we need the brushes dialog box open. Go to the Windows Menu | Toolbox or press CTRL+B to open the Toolbox Tool Options if you don't see it on screen.

 

 

post-2143-0-07011700-1505847617_thumb.png

 

We now need to pick a color. You may remember that 160A sprites are only 3 colors, so why can we choose from 4? One of them is transparent and will take on the color of the background. Which is which depends on how your palettes are defined in the code. Since we pulled this graphic file from the plotmapfile sample, we can take a look at the palette that is used when it’s called in the code:

 

rem ** setup Palette 1

P1C1=$12

P1C2=$F6

P1C3=$Fc

 

If we look at the Color Chart (available on Random Terrain’s website), we can see that it’s set to use shades of dark yellow and brown. We can also see in the code that the background is set to $00, or black, so we know that the “transparent” background color is black in this case.

 

post-2143-0-01364600-1505847638.png

 

Let’s click on color picker tool and choose one of the four colors to modify the image. he colors in this image don't matter, but if you want to see what your image will ultimately look like pick from the palette., as they are changeable with the PxCx command in the code. One of the colors is transparent and will take the background color.

 

post-2143-0-41576900-1505847678.png

 

I”ll explain it in more detail later, but in the plotmapfile sample file RevEng has “set doublewide on” enabled, so our sprites will be 16x16 pixels in size. This particular file includes the images for three diferent sprites, but you can make the file much larger. If you wanted to have six sprites in the same image file, you could double this file in horizontal size. I’ll get to how to do that a bit later, for now let’s modify this file as it is now. After you use the color picker tool, click on the pencil tool to actually draw a pixel. Modify the brush size in the toolbox to however many pixels you want to draw at once.

 

post-2143-0-77572100-1505847723.png

 

I decided to change the blank area to a smiley face.

 

post-2143-0-18072700-1505847746.png

 

When you’re satisfied with your results, we can save the file. That sounds easy, but Gimp tries to trick you. J You’d think you could just click on “File” and “Save As”, right? Well, if you do that you’ll be saving it in a Gimp proprietary format. We need to save it in PNG format, so we need to export it, not save it. Click on File | Export As to save it for use in your code. When you click on the “export” button in the Export Image window, it will present you with 8 checkbox options. It’s ok to simply accept the defaults, no changes are required.

 

post-2143-0-05155100-1505847771_thumb.png

 

That’s it! We’re now ready to use the modified image file in a 7800basic program. To test out our changes, let’s try compiling the sample program with our newly modified image.

 

Just like when we worked on the Hello World sample, I’m going to create a new graphics directory in my root folder called “gfx_plotmapfile”. I’ll copy the plotmapfile.bas file to my root directory and all of the image files in the “gfx” folder into my newly created graphics subfolder. Remember that we’ll have to add or modify the set basepath line in the code for it to work. In this case, each graphic was hardcoded to gfx/, I removed that from each line of code. It may seem like extra work, but being consistent will pay off later!

 

So just like in our hello world sample earlier, I ran “7800bas plotmapfile.bas” from the command line in my root folder, then ran “C:\78b\mame a7800 –cart plotmapfile.bas.a78” in order to bring it up in the emulator. Resut? Success! We now have our adventurer navigating a desert with both rocks and smiley faces. J

 

 

post-2143-0-33895800-1505847810.png

 

So, we’ve had our first taste of success in modifying a file, but the plotmap file is also a sample of how to use a character map with the Tiled application. If we had saved the file with a different name, updated the 7800basic code to reflect that new name, and compiled it, we would have gotten an error. Why? Because the image file is tied to a character map that was generated with the Tiled map editor, which uses the original file name. Let's dive into creating our own playfield map next using the same sample program.

 

A few Gimp tips

 

Before I get to creating a map file with Tiled, I’d like to go over some other tips and tricks I’ve learned working with Gimp. I really like RevEng’s sample graphics files and how they include the extra info at the bottom, it’s a great help in lining up your individual sprite graphics. In most cases you’re going to want the file to be larger, however, and it’s easy to do. You can make the files much wider if you want, I’ve made them up to 256 pixels wide. It's important to note that these sample files with the extra info are appropriate and helpful for creating tilesets for maps, not sprites. Once we get into making standalone sprites, the entire image will be used by the sprite. With that said, let’s try making a wider image with the same tileset_rocks file.

 

First, to make it easy on ourselves, open up a second copy. We’ll be modifying one, and copying from the other.

 

 

post-2143-0-52174400-1505847851.jpg

 

Once you have two copies opened up, choose Select | All from one of them, and then hit CTRL+C to copy it to the windows clipboard. On the 2nd image, choose Image | Scale Image from the menu, and change the Width to 96, then click the link between them (to break it), then change the Height to 26 (to keep the height the same). It will double the width, but it will also stretch out the image itself. Now we can copy in the image we have stored in the clipboard (twice) to fill in the image on the left and right sides. Hit CTRL+V to paste the image from the windows clipboard.

 

post-2143-0-93015000-1505847889_thumb.png

 

This is what you should see after you scale the image:

 

post-2143-0-40686500-1505847926_thumb.png

 

And this is what you should see after you paste the original image from the clipboard on the left and right sides.

 

post-2143-0-76115100-1505847958_thumb.png

 

Easy, right? Now you can save the image after you’ve modified it, and when you pull it up in the tiled map editor you’ll have twice as many tiles to choose from in the same image file (I’ll get to using the map editor next).

 

Having trouble starting fresh with a clean sprite image? You can also grab any image you want from the internet, scale it to the correct size, pasted it into an existing image file that already has the correct palette colors, and you’re ready to go for editing it. I’ll give you an example of that as well, as it’s what I did when I created the Zelda adventure demo a few years ago to save time.

 

I did a quick google image search for “zelda sprites”, and found an image of a sprite that looks like Link here.

 

I copied it, and here it is:

 

post-2143-0-59833400-1505848000.png

 

As-is the image is unusable as it won’t match the color palette of the 7800. It’s 218x267 pixels and uses an incorrect RGB palette. Let’s open it up in Gimp.

 

post-2143-0-10866500-1505848029.png

 

Now what?

 

First, let’s resize it to a usable size by the 7800, 16x16 pixels. Use the same method you used before, making sure to break the scaling link and keeping it at 16x16. After we resize it, you can really see all of the extra palette colors in the image. It looks like crap, yes, but we’re not done yet. Again using the same method as before, select the entire image, then copy and paste it into the tileset_rocks image that is already configured with the correct 7800 palette. No, it doesn’t paste in perfectly, but it gives you the basic shape that you can easily modify and make your own. In many cases it’s much easier than starting from scratch.

 

 

post-2143-0-67584200-1505848090.jpg

 

With a little touching up, we’ve got a nice looking 16x16 Link type sprite, and it only took about 2 minutes of work. J

 

 

post-2143-0-56307100-1505848120.png

 

Creating a plotted playfield map with the Tiled map editor

 

Now that we’ve got a basic primer on using Gimp out of the way, I’m going to go through the initial setup steps for Tiled, specifically for a map that will work with the 160A display mode along with 'set doublewide on' in your code. The Tiled app has been updated since I first posted my original tutorial so I’m going to update the screenshots and the text as some things have changed.

 

This tutorial was created with Tiled version 1.0.2.

post-2143-0-49338000-1505848147.png

 

Before you start you'll of course need all of your graphics images completed. If you make any changes to your tileset graphics in the future, the changes will automatically be reflected in the map as long as you do not change the name of the file. As I mentioned earlier, you cannot change the names of your files once you’ve included them in your map without re-doing all of the tiles in the map that were contained in the image with the old file name.

 

If you do change the name of one of your existing tileset files, when you load your map the tiles with the old file name the tiles that were used that file will now appear to be blank on the map. Tiled does not create an image file, it creates an XML file that maps out and links to the different graphics images that you have. If you change your image files you will have to update your map file (or files).

 

The tutorial here assumes 160A mode (as stated) as well as the "set doublewide on" setting. Normally the width of one character in 160A mode is 4 pixels wide, but adding "doublewide" changes that to 8 pixels wide. This is why I used "8" for the "tile width" in Tiled. As you would expect, if you do not use doublewide, you should choose a tile width of 4 pixels. If you wanted to adjust this tutorial for another mode, you can just lookup the width of one character in that mode in the table I linked to, and adjust for "set doublewide on" if you use it. That will be your value for "tile width". The "tile height" will be your zone height, and you can adjust the map size as you prefer.

Once you've installed it, select File | New Map.

 

Make sure you select the correct options for your new map. Select an orthogonal orientation, CSV format, 20x12 map size, and 8x16 tile size. Note that the Tile Layer format option has changed from the previous tutorial I made. For some reason XML is no longer an option in the drop down list, but it can be changed later once the new map is loaded. XML format is a requirement.

 

 

post-2143-0-15382800-1505848174.png

 

When you’re done selecting option, click on Save As. I’d recommend saving your map file in the same directory as your image files for the project. After it’s saved, you’ll be taken to the main editing screen. At this point we will be able to change our Tile Layer Format to XML. In the properties window pane on the left side, click on the Value box and change the option from CSV to XML.

 

 

post-2143-0-93279600-1505848205_thumb.png

 

Now your ready to load up your tileset graphics. You can load multiple sets if you’d like. Go to the Map Menu and click on New Tileset. Let’s load up the tile set that we just modified earlier.

 

post-2143-0-94459000-1505848245.png

 

Click on browse to select your tileset. For this map, using 160A and doublewide, we should choose Tiles at 8x16, Margin 0, Spacing 0. Make sure you click on "embed in map"! I forgot to add that in to the initial posting. After clicking on “Save As” and saving the tile set, it will load up and be available to use.

 

In the next screenshot, note that you can increase the zoom levels of the tile sets and map to make them easier to see and work with. At this point you can click on the image files (more than one can be chosen at a time), and then click on the map to place them where you want them. If you hold the left button mouse down you can drag the tile to fill the map screen. Note that this tileset does not include any “blank” tiles, and the entire map must have something added. If you want areas with a blank background, you’d have to load up a tile set with an image file that includes blank spaces.

 

post-2143-0-11108900-1505848320_thumb.png

 

If you load multiple tilesets, each one will get their own tab. An additional tile set is loaded the same way as the first one – click on the New Tileset icon and add another. The sample code includes another file named “tileset_blanks”. I loaded that one up and modified the map to make the entire middle portion blank.

 

post-2143-0-21196400-1505848351_thumb.png

 

Once you're happy with your map design you can save it as a tmx file and use it in your 7800basic program.

 

So, we now have an updated map file. Let’s see if it works! If you look in the sample code, you can see that the tmx map file is called directly from within the 7800basic code:

 

incmapfile myplotmapfile.tmx

 

I simply saved over the existing file with the file that we just modified. After that, it’s just recompile and check the results in an emulator. Results? Success!

 

post-2143-0-05676700-1505848382.png

 

That's it for this part. I'm haven't started on part 3 yet, so it'll be a little while. :) I'd like to review a few more Gimp demos before I dive in to starting on a game.

Tutorial Contents:

 

Part 1:

 

Setting up your Development Environment

 

Part 2:

 

Creating Graphics

 

Creating a Title Screen

 

Sprite Creation & Displaying Them on the Screen

 

Part 3:

 

Getting Started with Writing the Code

 

Adding Player Sprite Movement and Gun firing

 

Moving Non-Player Sprites on screen

 

Collision Detection between gunfire and Non-Player Sprites

 

Adding a Status bar with the Score and Lives Remaining

 

Collision Detection between all Sprites, Speed Change on clearing screen

 

Animation, Sound Effects, and Performance Troubleshooting

 

Adding a High Score

 

Code Optimization, More Animation, and Holey DMA

 

 

AtariVox Speech

  • Like 5
Link to comment
Share on other sites

I want to create a game as part of this tutorial and I was trying to think of a good idea last night. I decided to focus on an arcade style action game as it fits in well with the 7800's library and that type of game will be a little easier to pull off based on my experience. No groundbreaking new RPG this time. :) I have yet to make a game that fully takes advantage of the huge number of moving sprites you can have on-screen, so I'm thinking of something with Robotron-style gameplay. I like to start with a good set of graphics already created, so I started working on a title screen graphic last night and was trying out ideas with both 160A and 320B. I may go with 320B for the entire game as I think it's more fun to work with the higher resolution, but we'll see where this idea takes us. It's not unusual for me to completely change direction once I get going and see what's possible in code.


The working title will be "Space Junk", and as a starting point I'm going to create graphics with the concept of an astronaut walking around the surface of a planet, shooting all the "junk" that's falling out of the sky and threatening to demolish the planet, and maybe throw in an few alien antagonists that want to keep you from accomplishing your mission. I'm going to start working on creating images, and I'll make another post hopefully within the next week or so regarding what I did and how I did it with plenty of screenshots and details. I'll keep the graphics development portion in the "part 2" section of this tutorial, once it's time to start writing code I'll start a new "Part 3" topic.

  • Like 2
Link to comment
Share on other sites

I’ve completed a title screen. I’d normally spend a little more time on something like this, but I think it turned out pretty cool. I’m using 160A/doublewide as I decided that for a tutorial it would be best to stick with the simplest and most common mode. The code I’ve written so far simply displays the title screen graphic, nothing else.

 

Here’s the title screen:

 

post-2143-0-31294800-1505965881.png

 

Below is a graphic that shows how the title screen is defined in the 7800basic code. The code right now is only 21 lines long, but it introduces some keywords that will need some explanation. I’ll get to that shortly. To display the titlescreen image, we first run the “incbanner” command. It allows us to import graphics that are larger than a single zone, so we can import and display an entire large image at once. After it’s loaded up with incbanner, we can plot it with the “plotbanner” command.

 

*Technical Tip: To accomplish plotting a banner "N" zones tall, 7800basic actually plots "N" sprites. This should be taken into consideration for games that are already pushing the sprite limits. We don’t have to worry about pushing any limits with this title screen, but it's important to note when you're creating games. The default zone height is 16, and our image is 96 pixels tall. Plotting this banner is actually plotting six 128x16 sprites on the screen in strips, and would count as 6 sprites against our hard limit of about 24 sprites on screen at once.

 

post-2143-0-47898000-1505965882_thumb.png

 

So what does all this code mean? I’ll go through some basic explanations, but we’ll dive in more once we start working on the code for the actual game.

 

rem * Space Junk

set doublewide on - This tells MARIA to fetch 2 bytes of character data for each character you plot, effectively making the characters twice as wide.

set basepath gfx_spacejunk – This sets the compiler to look for all of your image files in <root folder>\basepath. In my case, it’s C:\78b\gfx_spacejunk, where C:\78b is my root folder.

displaymode 160A – Sets the MARIA display mode for the game

incbanner spacejunk_title.png 160A 0 1 2 3 – This is explained in the image above. It sets the image mode and the colors.

rem * Set Palette 0 Colors – as I commented, it sets Palette 0.

P0C1=$26 – P0 is for Palette 0, C1 is for Color 1.

P0C2=$24

P0C3=$04

clearscreen – This erases anything already on the screen

plotbanner spacejunk_title 0 15 30 – This plots the title screen image with Palette 0 at X location 15 and Y location 30.

Savescreen – It saves any sprites and characters that you've drawn on the screen since the last clearscreen. We’re essentially saving the title screen image in memory so it doesn’t have to be called over and over again in our main game loop. It works in conjunction with “restorescreen”.

drawscreen

mainloop

BACKGRND=$00 – sets our background color to black.

Restorescreen - erases any sprites and characters that you've drawn on the screen since the last savescreen, and restores what was saved.

Drawscreen – Just like batariBasic, it ensures that all plotted graphics are ready to display, and waits for MARIA to start the display

goto mainloop – jumps back to the main game loop.

 

There’s really not much I can demonstrate with a screenshot on the graphic creation for the titlescreen. Here’s a few notes:

  1. I started with the tileset_rocks.png image and resized it to 128x96 with the Image | Scale Image menu option.
  2. Once it was scaled, I cleared it out to start over. I used the same three basic brown & white colors from the original image, knowing that I’d simply change them with palette options in the code.
  3. I created the entire image using only the three items highlighted in green in the sceenshot. I used the color picker to choose which of the three colors I wanted to use, the pencil to draw them, and I sometimes increased the brush size to make it easier to draw the larger letters.
  4. Beyond that it was just the creative process of figuring out what to draw. J

post-2143-0-55898100-1505965884_thumb.png

 

That’s it for tonight. Next I’m going to start working on sprites to use in the game, and expanding the code enough so that we can plot them and see them on the screen. I’ll also add in the code to allow you to press the fire button to start the demo and jump away from the title screen.

 

The zip file contains the image file, the 7800basic code, and the compiled files: spacejunk_092017_1.zip

 

  • Like 3
Link to comment
Share on other sites

I worked today on creating sprites, as we need to create our “junk”. Sprite design and color choices were made fairly quickly, but it can all easily be tweaked later. This demo includes 24 sprites on the screen at the same time. It may be hard to see in the screenshot, but I plotted the bullet sprite twice, just to the right of the right facing spaceman character.

 

The code was updated to only include the bare minimum needed to display all of the graphics on the screen, which still turned out to be about 100 lines of code. It’s now a bit too big to put in a screenshot. Working on making a game out of this will happen later. Now that I’ve got all the graphics I need to get started, that will probably be sooner rather than later. J

 

When I created the sprites in Gimp, I opened up a ton of small windows on the screen all at once. Most of them are 8x16, and will stretch to 16x16 when they’re plotted because of the doublewide setting that we’re using. Our protagonist, the spaceman, was designed with a 16x16 sprite, as was the “evil alien”. I also added a sprite for the bullet for the spaceman’s gun which is 2x4 pixels. Just like when I created the title screen, I created all of them with just the color picker and brush tool. If I wanted to erase something, I’d just choose black and overwrite it, I never use the eraser. The only Menu items I used were the scaling tool to occasionally change the size of the image, and of course the export option to save it.

 

post-2143-0-49512800-1506040692_thumb.png

 

I also created some tiles for the background, and I used mike’s tileset_rocks image as the template. I used two images, one for the moon’s surface at the bottom, and the other to create a random star pattern in the sky. I updated my original tutorial to note it, but I discovered that with the new version of Tiled you need to click the “embed in map” option when you add a tileset or you’ll run into problems. It’s a checkbox on the popup window when you add a tileset.

 

post-2143-0-42969100-1506040696_thumb.png

 

Here’s the map design in the Tiled map editor.

 

post-2143-0-88824500-1506040693_thumb.png

 

Below you can see all 24 sprites plotted on the screen. We may need a few more as we progress, as we’ll probably want to add some animation to some of the sprites, and also explosions. I’ll wait on that until later down the road, as it’s not needed to get started. I still need to think about how this game is going to work, I don’t really have that completely planned out yet. I know I’m going to try and have a whole lot of the sprites on the screen at once for some frenzied action. At first I’m going to have the spaceman walk around the screen, but we could add thrusting and gravity to him as well. It’s a bit more advanced, but I know it could be added because RevEng has already shared a sample program on how to do it.

 

post-2143-0-29968200-1506040691.png

 

That’s it for the graphics creation portion now, next I’ll start with planning the code and starting to write it. We’ll start with some best practices to get started, especially with formatting, commenting, and variable and label naming conventions.

 

The zip file contains all of the graphics, the code, and the compiled files: spacejunk_092117_1.zip

  • Like 2
Link to comment
Share on other sites

Great tutorial,but Gimp is a sh....program and really heavy to use.

I wish,there wasan easier graphic tool.

greeting Walter

 

If you or someone else can point me to a commonly used Windows 10 alternative that's comparable in functionality, easier to use, and also free to use, I can look at documenting the palette import portion at a minimum. I'm not going to pay for a license for any advanced image creation software because honestly outside of 7800basic I don't need it. Gimp works well enough for me in that regard. :)

  • Like 1
Link to comment
Share on other sites

Not wanting to derail the lovely thread, but it's not like Gimp is the only option. 7800basic doesn't import GIMP-images; it imports indexed png images. PNG is an open standard.

 

I do mention GIMP in the 7800basic docs and it's the "supported" option because it's freely available on every OS platform that 7800basic supports, the PNG implementation is solid, and it has the required features. I'm not going to spend any of my time and trying to figure out which other graphics programs can generate a compliant png, but that doesn't stop anyone else from figuring out their preferred toolset. (as SmittyB has done)

 

I also happen to think Gimp works "well enough" that I couldn't see paying for a graphics program. I've used Gimp for all kinds of pixel art, web art generation, photo adjustment and cleanup, animation work, etc. I understand why some may object to using it because they're unfamiliar with it's interface, workflow and features, but it's hardly a "sh** program".

Link to comment
Share on other sites

I'll try to help with Gimp if I could. A couple of keyboard shortcuts to use by default are "O" (as in Oh) for the Color Picker tool. The other is the "N" key to use the Pencil tool. Plus some other stuff...

 

post-18158-0-72654400-1506670447_thumb.jpg

 

Problem with Pbrush is that I cannot find any transparent setting. If it's imported to GIMP then the white background is also considered as a color.

 

Also I'm using an older version of GIMP (2.8.16) and works well. You can get older GIMP versions at http://www.oldapps.com/gimp.php

  • Like 1
Link to comment
Share on other sites

I've been searching for an easier alternative than Gimp for graphics creation, and it seems I've found one, although it is a Windows-only solution. Pixelformer works very well and is really simple to use. It doesn't allow for advanced palette import options, but it easily creates 7800 compatible PNG files. I just created a new compatible sprite with it with minimal effort and no special configuration of the application, and the resulting file worked perfectly with 7800basic. I spent about 60 seconds testing it and about 5 minutes documenting what I did to make it work below.

 

The homepage mentions that the beta version is free but I could not find any license information anywhere on the page. As far as I can tell it's free software.

 

Supported Operating systems:
• Windows XP, Windows Vista, Windows 7, Windows 8, Windows 10.
• Both 32-bit and 64-bit versions are supported.

Hardware:
• 500MHz CPU (1GHz recommended);
• 256MB RAM (512MB recommended);
• 1024x768x15bpp display (1024x768x32bpp recommended).

Download version 0.9.6.3 RC3* (~880kB):

primary download site
mirror download site

*stable free beta version.

 

I created a random colored 16x16 sprite:

 

post-2143-0-44631700-1507086873_thumb.png

 

After clicking on File | New, I chose the 16x16 size and the 16 color 4bpp color palette.

 

post-2143-0-46420600-1507086872_thumb.png

 

I then chose Image | Export, chose the PNG format, named the file and chose the directory, chose no compression, and clicked ok.

 

post-2143-0-19603800-1507086871_thumb.png

 

I then modified one of the existing space junk code examples to include my test png file with the incgraphic command, then changed some of the plotsprite commands to use the new image, then compiled it. It worked perfectly.

 

post-2143-0-55671800-1507086870.png

 

 

  • Like 3
Link to comment
Share on other sites

  • 6 months later...

I'm finally doing this tutorial, but I'm having trouble getting the colors to match up.

Here's a test sprite I did, with the color map showing:

 

post-1050-0-26800700-1525781504.jpg

 

Here's the part of my code that imports the sprite and defines the palettes:

 

post-1050-0-02088200-1525781848_thumb.jpg

 

"testsprite" is the one in question. Notice that I have it using palette 1, which is defining color 1 as blue ($82 on RandomTerrain's color chart), color 2 as red ($44), and color 3 as white ($0F). This is how they're indexed in the GIMP.

 

However, here's how it renders:

 

post-1050-0-18128600-1525781828.jpg

 

I clearly am specifying palette 1 for testsprite, but it's ignoring that and going with palette 0. I tried palette 2 as well but got the palette 0 definitions. If I eliminate my palette 2 definition completely, then all I get for the sprite is just a few blue dots...and those are where the RED should be!! But that's all that shows up.

 

What's going on???

Link to comment
Share on other sites

You've got the sprite using 320B mode which is a little tricky. 320B mode requires pairs of pixels to use the same palette, and it's not a graphics mode I've attempted to use in any of my games.


You could try using a different graphics mode, or take a look at the documentation for incgraphic and try swapping the color index values. You can use trial and error to see which combination produces your desired result. Where you have ingraphic testsprite.png 320B in your code, you could try incgraphic testsprite.png 160A 0 2 1 3 instead (swaps the 2nd and 3rd index, as an example). You could also try importing it with a different mode and test the results: ingraphic testsprite.png 160A 0 1 2 3. There's more info on the incgraphic command here.


I realize this isn't a very good answer, but I am at work and can't really dive into it right now. If you'd like to post your image files and code I can download it and take a look myself when I get some time and give some better feedback.

Link to comment
Share on other sites

Yeah, I wanna keep it kind of...mysterious...until I'm just about done. :) In the mean time, I have a new problem: my banner is only showing the first 16 pixels across. ughghh....the size is 143 x 16, on a 320B screen. Doublewide enabled.

Link to comment
Share on other sites

Yeah, I wanna keep it kind of...mysterious...until I'm just about done. :) In the mean time, I have a new problem: my banner is only showing the first 16 pixels across. ughghh....the size is 143 x 16, on a 320B screen. Doublewide enabled.

 

I understand that, I usually wait on posting about a game until I have a mostly complete playable demo. I've seen that issue you're having before, but I don't remember off the top of my head what the issue is. I have some sample programs on my laptop at home where I was testing 320B in a similar manner, although I can't remember if I was using plotbanner or plotmap. I'll take a look tonight when I get home.

Link to comment
Share on other sites

Yeah, I wanna keep it kind of...mysterious...until I'm just about done. :) In the mean time, I have a new problem: my banner is only showing the first 16 pixels across. ughghh....the size is 143 x 16, on a 320B screen. Doublewide enabled.

Cart please.. :P
Link to comment
Share on other sites

Dauber - I found the demo I was playing around with last summer that uses 320B. It's an asteroids-type game based on RevEng's spacephysics sample. I used a 320B title screen graphic, and to get it to display how I wanted I had to split it into left & right sections. I'm attaching the demo files just in case you'd like to take a look at what I did. This was nowhere near complete - I was simply testing the use of 320B with this demo and abandoned the idea. If anyone wants to take this demo code and/or graphics and use them for a project, feel free. I'm not planning on taking it any further.

OuterRim-Demo(320B).zip

post-2143-0-70366000-1526003709_thumb.png

post-2143-0-98700800-1526003727_thumb.png

  • Like 1
Link to comment
Share on other sites

Are you still having trouble displaying the blue portion of that 320B sprite above? You'll notice that the C1 color has conditions on being displayed in 320B, in that it must be paired with either a C2 or C3 pixel in the same pixel-pair, otherwise it doesn't get displayed. (ie: it'll take the background color for itself.)

 

I ran into that issue early in Graze Suit Alpha. Note that prosystem will incorrectly show C1 all the time, but Mame and real hardware will display C1 pixels using the rule above.

 

Also, 320B only uses palettes 0, and 4. Attempts to use palettes 1-3 will default to palette 0, and uses of palette 5-7 will use palette 4. ie: it only looks at the top palette bit in the display lists to determine palette.

Edited by Mord
  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...