Making a MaxGUI Application: StripAnimMakerLite Part 1- Introduction and Main Canvas
(c) Assari Jan 21 2005
** If you have enjoyed these tutorials, you may want to check out my other contributions (link)

Having written more or less 15 parts on the MaxGUI beginner tutorial series, I thought now would be a good time to put into practice some of the stuff that we have learnt so far. These series of tutorials will take you through from the beginning steps through to a complete MaxGUI based application. If you have not gone through my beginner series tutorials, I suggest you go through them before starting on this one. Link to the tutorials here.

Introduction

The application we are going to make is called StripAnim Maker Lite. What does it do?

Allows you to load an image (png, bmp, jpg)
Define a rectangular part of the image
lay the image onto an animation strip
save the strip as a png image file to be used by BlitzMax, Blitzplus or other programs that can use a png image strip for animation

The final program will more or less look like this (see image below). Note the following features:-

A main Canvas with a selection cursor and scrollable image area (top left)
A zoomed view of the selection cursor (top right)
An animation stripbar at the bottom
A preview of the animation (sharing the same canvas as the zoomed view)

The sprite image I'm using is courtesy of Ari Feldman who released a set of 2D sprites to the public domain sometime ago. The license txt can be found here and the image here.

Design Philosophy

The idea is to try and put into practice the concepts that we have learnt in the tutorials so far. Not all will be used of course but I will refrain (as much as I can) from using stuff which has not been covered yet.

The program is also written with program clarity as the main objective (this is a tutorial after all), therefor will overide code optimization. Some of the techniques used may not even be considered as good programming practice :)

I am calling this program AnimStripMaker Lite as the functionality will be light, just enough to get a useable program so that the length of this tutorial is manageable.

There will also be no types or OOPs used in the program, simply to demonstrate that it is possible to program in Blitzmax the old fashion way. To a large extend I have succeeded in doing this but as BlitzMax has a lot of OOP in it some calls to the built in OOP methods are unavoidable.

I am by no means an expert or a professional programmer but a self taught person who has been dabbling with programming for some while. Any feedback on style, bugs and wrong techniques are welcomed.

These tutorials will be broken into several parts but I will leave you with a working program (though not likely to be very useful) at the end of each part. Note that I retain the copyright for both these tutorials and the code therein. I may release the code under a less restrictive license once I decide on which one to use.

OK, enough pre-amble, lets make a start.

THE SKELETON PROGRAM

We will start with the simplest structure first so that we can get comfortable with how our program will look like.

SuperStrict
'==========================================================
'DEFINE VARIABLES BLOCK
'==========================================================
'
Global Canvas1:TGadget
Global MyWindow:TGadget

'==========================================================
'GADGET CREATION BLOCK
'==========================================================

'Main Window and Main Canvas
CreateMainWindow(800,600)

'Create the required Canvases
CreateCanvases()

'==========================================================
'MAIN LOOP BLOCK
'==========================================================
Repeat

WaitEvent()
Select EventID()
    Case EVENT_WINDOWCLOSE, EVENT_APPTERMINATE
        End

      Case EVENT_GADGETPAINT
        Process_GadgetPaintEvent

End Select
DisplayStatusText

Forever

End

'==========================================================
'FUNCTIONS ALL DOWN HERE, ALSO IN ALPHABETICAL ORDER
'USE THE CODE FRAMES TO NAVIGATE
'==========================================================
'
'---------------------------------------------
'Function Create Main Window
'---------------------------------------------
Function CreateCanvases()

'---------Canvas1 is our Main Canvas
Canvas1:TGadget=CreateCanvas(0,0,480,400,MyWindow)

End Function

'---------------------------------------------
'Function Create Main Window
'---------------------------------------------
Function CreateMainWindow:Int(WinWidth:Int,WinHeight:Int)

Local Style:Int = WINDOW_TITLEBAR | WINDOW_MENU | WINDOW_STATUS | WINDOW_CLIENTCOORDS
Local w:Int=(GadgetWidth(Desktop())-WinWidth)/2
Local h:Int=(GadgetHeight(Desktop())-WinHeight)/2

MyWindow=CreateWindow("StripAnim Maker Lite", w,h,WinWidth,WinHeight,Null,style)

End Function

'---------------------------------------------
'Function to Process EVENT_GADGETPAINT
'---------------------------------------------
Function Process_GadgetPaintEvent:Int()

    SetGraphics CanvasGraphics (Canvas1)
    Cls
    Flip

End Function

Cut and Paste the above program into the MaxIDE and run it. Running the above program will yield us nothing very exciting, but should look like the following (the black area is our canvas area):-

Before we proceed, let us make sure we understand the program we have just executed. Firstly note that the program is grouped into 4 parts

1) Part 1 - Variable definitions
2) Part 2 - Gadget creations
3) Part 3 - Main Loop
4) Part 4 - Functions defintions

'==========================================================
'DEFINE VARIABLES BLOCK
'==========================================================
'
'==========================================================
'GADGET CREATION BLOCK
'==========================================================

'==========================================================
'MAIN LOOP BLOCK
'==========================================================

'==========================================================
'FUNCTIONS ALL DOWN HERE, ALSO IN ALPHABETICAL ORDER
'USE THE CODE FRAMES TO NAVIGATE
'==========================================================

Studying our Skeleton Program

Note the use of Superstrict, highly recommended to prevent later grief.

Part 1 - Variable Definitions

At this stage we only need two variables, one for our Main Window and the other for the Main Canvas both of type TGadget.

Part 2 - Gadget Creation Block

We create the two required gadgets using two functions CreateMainWindow and CreateCanvases, which we will come to later

'==========================================================
'GADGET CREATION BLOCK
'==========================================================

'Main Window and Main Canvas
CreateMainWindow(800,600)

'Create the required Canvases
CreateCanvases()

Part 3 - MAIN LOOP

The MAIN LOOP is the familiar main loop that we have seen many times before, except this time all the event processing except for the window close/application terminate event will be processed in functions for clarity.

'==========================================================
'MAIN LOOP BLOCK
'==========================================================
Repeat

WaitEvent()
Select EventID()
   Case EVENT_WINDOWCLOSE, EVENT_APPTERMINATE
       End

   Case EVENT_GADGETPAINT
       Process_GadgetPaintEvent

End Select

Forever

End

Part 4 - Function Definitions

the 800x600 Main Window is created via this function call:-

CreateMainWindow(800,600)

We set the style we want to use and then calculate the w and h position such that our window will be positioned at the center of our desktop. Note the use of the Desktop() function.

Function CreateMainWindow:int(WinWidth:Int,WinHeight:Int)

Local Style:Int = WINDOW_TITLEBAR | WINDOW_MENU | WINDOW_STATUS| WINDOW_CLIENTCOORDS

Local w:Int=(GadgetWidth(Desktop())-WinWidth)/2
Local h:Int=(GadgetHeight(Desktop())-WinHeight)/2

MyWindow=CreateWindow("StripAnim Maker Lite", w,h,WinWidth,WinHeight,Null,style)

End Function

Creating the main canvas is fairly straight forward

Function CreateCanvases()

'---------Canvas1 is our Main Canvas
Canvas1:TGadget=CreateCanvas(0,0,480,400,MyWindow)

End Function

The last function in this simple skeleton program simply clears the canvas and does the flip to display the canvas to the world.

Function Process_GadgetPaintEvent:Int()

    SetGraphics CanvasGraphics (Canvas1)
    Cls
    Flip

End Function

So there we have, a simple skeleton from which our entire application will be built on.

That's all for now. Return to Main Index.