How To Improve My Games Visuals

[kevin]

How To Improve My Games Visuals:

Document Revision: V0.02a  (15th,Oct,2012)

Q. What is this ?  

      Answer:  This tutorial (in the form of an FAQ) is to help give new PlayBASIC programmers some ideas on how they might create particular visual effects or make some visual improvements.

     

Note: These are in no particular order

Q.  How can I make the fonts in my game more appealing ?

      Answer:  Drawing text in PlayBASIC is pretty trivial, we load a font and Print it out on screen.  But when we do this, we're using the system fonts, which can be a bit bland and uninteresting for games.   What game makers generally do, is they draw custom alphabets for their game.   The technique is often called 'Bitmap Fonts'.   In the old days you'd have to write the display code completely for a bitmap font.  But thankfully PlayBASIC includes various Bitmap Font modes built in.  

      To create a bitmap font, we use the 'CreateBitmapFont' command to initialize the 'blank' font.  Each character  in the font has a fixed size (Width and height) but none of the letters have any graphics in them.   So we need to 'grab' the characters from an Image or screen.  So assuming we have an image where each character is 32 pixels wide and 48 pixels high, with all the characters from 0 to 255 in row, we'd use some code like this to grab the characters and place them in our font.  

PlayBASIC Code: [Select]

 ; Ask for a free font Index
 ThisFont =GetFreeFont()

 ; Initialize this font as Bitmap font
 CReateBitmapFont ThisFOnt,32,48,2


 ; load our Character set font into memory
 BitMapFontImage=LoadNewIMage("MyBitmapFontImage.bmp",2)
 
 ; grab the letters from the image 
 rendertoimage BitMapFontImage
 For ThisChr = 0 to 255
     ;Grab this characters pixel data and copy it into the font
     GetFontChr ThisFont,ThisChr, ThisChr*32, 0
 next

 ; Delete this image, do no longer need it
 DeleteIMage BitmapFontIMage

       Now this will work, providing that the person who made the bitmap font, has drawn every possible ASCII character (upper case, lower case symbols the works) .  The thing is, often when people draw bitmap fonts they tend only include the characters they need.  In that case, we'd need to map the order of the characters (as they're been drawn) back into our Font.

    Which looks something like this, again assume the characters are 32 pixels wide and 48 pixels high and stored (left to right) on the bitmap font image.  
     

PlayBASIC Code: [Select]

 ; Ask for a free font Index
 ThisFont =GetFreeFont()

 ; Initialize this font as Bitmap font
 CReateBitmapFont ThisFOnt,32,48,2


 ; load our Character set font into memory
 BitMapFontImage=LoadNewIMage("MyBitmapFontImage.bmp",2)
 
 
 
 ; Our character order string..  This string holds
 ; the order the letters in the bitmap font.  
 
   ChrOrder$ =" 1234567890abcdefghijklmnopqrstuvwxyz"
 
 
 ; grab the letters from the image 
 rendertoimage BitMapFontImage
 For Chrlp = 1 to len(ChrOrder$)

     ; grab this character from character order string
     ThisChr = mid(ChrOrder$,Chrlp)

     ;Grab this characters pixel data and copy it into the font
     GetFontChr ThisFont,ThisChr, (Chrlp-1)*32, 0

 next


 ; Delete this image, do no longer need it
 DeleteIMage BitmapFontIMage

      Once characters are imported into our font.  We can just set this font (SetFont) and PlayBASIC will render any text it in Print / Text statements.   Depending upon if you want Alpha Channel and the font to be reactive to Ink Colour, you can also pick between an AFX bitmap font variation, which will render the font using it's Alpha channel transparancy, or a CRF form.   The CRF's (Compressed Raster Font) support Alpha Channel and respond to INK colour changes.  Making them the most flexible and generally the fastest option.    



         Related Articles:

         * Alpha Bitmap Font Library/Example (login required)
         * Custom Bitmap Fonts
         * Convert Text into an AFX image
         * How to (Manually) Create Compressed Raster Fonts (login required)
         * PlayFont (Convert Windows Type Type Fonts to PlayBASIC CRF format)
         * Tree Parallax




Q.  How can I make the sprites in my game more appealing ?

      Answer: The artwork is always difficult for us indie game programmers.   From a programming stand point, there's often not much to it,  we load our images and draw them on screen to represent our characters.  Most of the time we can get away with that.   But sometimes you might want certain characteristics depending on how the art is drawn, and of course the particular requirements of our game.


      MaskColour / Alpha Channel Transparency

       The sprites / characters in most PlayBASIC games use mask colour transparency.   While this method is done differently today, the concept is as old as sprites in terms of video gaming.   Mask Colour transparency is a 2bit rule where for when two pixels are blended (drawn over each other), like say when drawing a dot from a sprite over background picture. Under this rule, the result is either the colour from the sprite, or the colour from the backdrop.   If the sprite colour is the nominated mask colour (Transparent colour) then back drop pixels are shown, any other, and it the sprite colour.  

       Mask colour transparency might be relatively easy to understand, but can lack the modern display finesse of Alpha Channel transparency.   Alpha Channel is per-pixel transparency solution, where each pixel in the sprite/image has an individual level of translucency.   These Alpha Level values range from 0 to 255, the same as the R,G, B components of the colour.  

        Just like mask colour images, when pixels with alpha channel are drawn, the render algorithm  takes the two colours (The pixels from the sprite and the pixel it's going to drawn over) and blends them together.   The Alpha value balances the amount of colour blending.  So the bigger the alpha value, the more of sprite colour is kept, the smaller then less.   If you make it 128 (50% of 255) you get half and half.   When the Alpha Level is 255, you get all of the sprite pixel and none the backdrop pixel.  

        How does this help ? - Well, with sprites containing the alpha channel, the individual pixel transparency levels are generally used around the edges of characters, to help give them a smoother appearance, often referred to anti aliasing.   So the edge pixels are being 'smudged' with the backdrop.  

        If you look closely at the PlayBASIC banner bellow,  you'll notice the blending around the letters and the obvious shadows. All of which are a result of Alpha Channel.  So the browser is rendering those particular pixels (the ones on the edges) blended over the backdrop colour of page, to give a smoother appearance.  

           

Q.  My program/game is very looking very static, how can I make it more appealing ?

      Answer: Well there's no definite answer.    However,  often adding transitions can help the appearance and feel of the game to the player.    A simple transition might be fading the screen in or out,  another might be to move adding motion to the programs user interface (GUI/MENUS) through the implementing some inertia for your games characters.


      Fading With Sinus: Fading routines often use inner interpolation,  which looks fine, but I often prefer to use sinus.  Starting from angle 0 and moving to 90 becomes the fade in, and 90 to 180 is the fade out.    If you plot the sinus of 180 degrees you'll notice it's we're getting a rounded shade to the movement.  In terms of of our fade this will make it so it's seem so to quickly fade into, even out and then quickly fade out.  

      In this example we're plotting some Y coordinates on the screen to show the curve.

PlayBASIC Code: [Select]

   Xpos=200

   For Angle=0 to 180
   
      ; Calc the Y coordinate using sinus with a radius of 150
      Ypos=Sin(Angle)*150

      Dot Xpos,300+Ypos
   
      Xpos=Xpos+2   
   next

   Sync
   waitkey
   

      Here's we're using the colour intensity using the sinus.

PlayBASIC Code: [Select]

   Setfps 60

   LoadFont "Arial",1,128
   
   ; init it's starting value
   FadeAngle=0

Do

   ; clear the screen to black (rgb(0,0,0)
   Cls 

   ; Calc the amount of the fade at this angle
   FadeLevel=Sin(FadeAngle)*255   


  ; plot the fade as a dot
   Dotc FadeAngle,GetScreenHeight()-FadeLevel, $ffffff


   Ink Rgb(FadeLevel,FadeLevel,FadeLevel)

   ; draw some text as the fading object
   centertext 400,250,"Hello World"
   

   ; wrap the fade angle with 0 to 180 degrees
   FadeAngle=mod(FadeAngle+1,180)

   ; show the screen to the user
   Sync
loop

      Linear fade

PlayBASIC Code: [Select]

   Setfps 60

   LoadFont "Arial",1,128
   
   ; init it's starting value
   FadeCount=0

Do

   ; clear the screen to black (rgb(0,0,0)
   Cls 

   ; Calc the amount of the fade at this angle

   FadeLevel=FadeCount
   if FadeLevel>255
         FadeLevel=255-(FadeLevel and 255)
   endif

   ; plot the fade as a dot
   Dotc FadeCount,GetScreenHeight()-FadeLevel, $ffffff


   Ink Rgb(FadeLevel,FadeLevel,FadeLevel)

   ; draw some text as the fading object
   centertext 400,250,"Hello World"
   

   ; wrap the fade count, fade angle with 0 to 512
   FadeCount=mod(Fadecount+2,512)

   ; show the screen to the user
   Sync
loop

         Related Articles:

         * Moving Platforms (login required)
         * Timed Fading Splash Screen (login required)
         * Using Timer With Sinus  To Flash A Message (login required)
         * Plasma (login required)

Return To PlayBASIC Tutorial Index