Friday, 17 February 2012

The Making of a Spectrum Loading Screen - Part.2

In the second part of this article I`ll go through the process of converting the final loading screen bitmap to a ZXSpectrum loading screen.
The method we use is detailled below as a set of key stages.


Stage.1 - ZXPaint
The first stage is to convert the .BMP image to a .SCR file.
To do this download and launch BMP2SCR.exe - you can grab it here ftp://ftp.worldofspectrum.org/pub/sinclair/tools/pc/BMP2SCR1751.zip
Follow the steps displayed in the image below. Anything green is a button you need to click.
The final step in the image has two options in green. You need to click on 'B=Toggle Bright' first.
In the third step, locate and select your final colour loading screen BMP image.




You'll now have a SCR file in the same folder, with the same name, as your original BMP image.


Stage.2 - ZX-PaintBrush
To start download, install & launch ZX-PaintBrush. You can grab it here http://www.zxmodules.de/zxpaintbrush/zxpaintbrush.html

Within ZX-PaintBrush 'Open' the .SCR loading screen file.
All looks good with your image? Switch off the colours (i.e paper colour=black & pen colour=white) and your image now appears scrambled!
As an example the below image shows the Gloop Troops 2 loading screen, imported from a BMP file, with the colours switched off.

So what's going on here? Simply the conversion process chose one of the two colours, in each tile, to be the paper colour (bits set to 0).
This meant that some tiles paper and pen colours were switched i.e. we have inverted tiles.
Because the colours are also switched the colour image appears fine. Remove the colours and the inverted tiles are revealled.
Thankfully ZX-PaintBrush has a toolset that allows for tiles to be re-inverted.
First thing to do is switch off the colour display.
Now select the 'invisible pixel and attribute inverter'pencil from the toolbar and click on any inverted tiles to revert them.
Below is screen shot of the ZX-PaintBrush UI with the colour display(1) and 'invisible pixel/attribute' pencil(2) buttons hi-lighted in green.

Once you've reverted all the inverted tiles you may now wish to add back in the half-bright colours on some of your tiles.
To do this I find the best thing to do in ZX-PaintBrush is to switch off the ink&paper colours as well as the pencil tool.
If you now select the half-bright option (dark semi-circle icon) you can click on any tiles you wish to set as half-bright colours.
Below is a screenshot of ZX-PaintBrush's UI. The areas of the UI that aren't darkened show the pencil tool, colour palette & half-bright attribute buttons.


When everything is complete, 'Save' it over the original .SCR file.


Stage.3 - Converting to a TAP file
We're now going to step through the stages that takes your game .TAP & loading screen .SCR file and combines them into a single .TAP file.

First thing to do is create a folder called 'MyGame''
This stage requires the pasmo z80 compiler. You can grab it from here http://pasmo.speccy.org/
Once downloaded, extract the contents to the 'MyGame' folder.

Now download BASTOTAP and extract the contents of the zip to the 'MyGame' folder. You can grab it here ftp://ftp.worldofspectrum.org/pub/sinclair/tools/pc/bas2tap25-win.zip

Now in your MyGame folder, create a file called Loader.bas and paste in the following lines of basic code;
10 PAPER 7 : INK 0 : PRINT AT 0,0
20 LOAD "" SCREEN$


Now create a file called LoadingScreen.asm and paste in the following lines of code;
org 0
incbin "LoadingScreen.SCR"


LoadingScreen.asm is the assembly file which will include the loading screen you've created.

Copy your loading screen to the 'MyGame' folder and rename it to 'Loading_Screen.SCR'.

Now open a command window and go to the MyGame folder. Type the following commands to build your game .TAP file.

bas2tap.exe -a10 -sLOAD loader.bas LOADER.TAP

pasmo --tap --name SCREEN LoadingScreen.asm LOADING_SCREEN.TAP LS.TXT

COPY /B /Y LOADER.TAP+LOADING_SCREEN.TAP FINAL.TAP


The first line calls bas2tap to convert your basic program to a .TAP file.

The second line calls pasmo to assemble your LoadingScreen.asm file ( which includes your loading screen image ) into a .TAP file.

The final line copies the basic loader and the loading screen .TAP files into your FINAL.TAP file which you can run in a spectrum emulator!

Drop this into a spectrum emulator and, hopefully, your game will now contain your loading screen!

This should now give you a good template in which to use when you wish to add a loading screen to your game.

Andy Oakley

15 comments:

  1. an exhaustive and complete tutorial, thx.

    ReplyDelete
  2. Nice job! I've added a gallery for You on ZX-Art website:
    http://zx.maros.pri.ee/eng/authors/a/andy-oakley/

    Send me a note please when the SCR version of the screen from this tutorial becomes available, so I'll be able to add it on ZX-Art :)

    ReplyDelete
  3. Dear Andy,

    many of the described actions (converting from BMP to SCR and after re-drawing saving as TAP) fortunately can all be done within ZX-Paintbrush. It's okay if you use your preferred programs (I also do) but I want to tell you that it's all possible. As well the change of the Basic code, ZX-Paintbrush contains a way to use ZX-Editor within a dialog.

    Kind regards,

    Claus Jahn (author of ZX-Paintbrush)

    ReplyDelete
  4. Hi, thanks for the great tutorial, spent an enjoyable afternoon putting together a loading screen and loading it in in Spectaculator. How do you display the final picture once it's loaded without the '0 OK, 20:1' message? Is it possible to add another line to the loader to just display the picture without the message and maybe change the border, or am I barking up the wrong tree?

    Thanks!
    Ashley

    ReplyDelete
  5. Ah, I found out 30 BORDER 0 fixes the border colour, I just wonder how to remove the OK report...

    ReplyDelete
  6. Hi Ashley, I'm glad you got your loading screen to work! The basic listing is from part of our loader, so typically we'd proceed to the next part of the load - I'll update the article tomorrow evening with a fix for you!

    ReplyDelete
  7. Hi Ashley, annoyingly I can't seem to get rid of that text when the program ends - we normally go straight into a load:

    10 CLEAR 24925
    20 PAPER 7 : INK 0 : PRINT AT 0,0
    30 LOAD "" SCREEN$
    40 POKE 23739,111
    50 LOAD "" CODE
    60 RANDOMIZE USR 24926

    I'll keep my eye open for a solution, alternatively there may be someone on World of Spectrum who'll have the answer (and I'd love to know!) Sorry I can't be more helpful (and for taking an age to get back!).

    ReplyDelete
  8. Thanks for taking the time to investigate anyway! :)

    ReplyDelete
  9. Dear Ash RA,

    You simply need to ensure that you BASIC program does not stop. Something as silly as 40 GO TO 40 would work (and can be interrupted by pressing a BREAK). A more elegant solution would be to use 40 PAUSE 0, which would wait until a keypress and then stop.

    All the best,
    introspec @ WoS

    ReplyDelete
  10. Hi,
    I am about to write a tutorial on how to draw a ZX Spectrum loading screen in Photoshop and was wondering if I could reference a few points in your tutorial, mainly how to convert it and get it on the Spectrum. I will of course credit you for the information. Is this OK with you?
    Regards
    Bill Harbison

    ReplyDelete
  11. Hi Bill, certainly please let us know if you have any questions.

    Hi Introspec, ah I wondered about an infinite loop, but wondered if there was something a bit nicer (pause 0 sounds like an excellent idea).

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. This is great!
    Is there a solution to combine music and a slideshow with more pics?

    ReplyDelete
  14. btw, on GNU/Linux, we need to replace “COPY /B /Y LOADER.TAP+LOADING_SCREEN.TAP FINAL.TAP” with “cat LOADER.TAP LOADING_SCREEN.TAP > FINAL.TAP”

    ReplyDelete