Snake Game on the FRDM-KL25Z with Nokia 5110 Display

Posted on July 4, 2014 by Erich Styger

So I have a graphics driver for a Nokia display (see “Zero Cost 84×48 Graphical LCD for the Freedom Board“), I have a joystick shield (see “JoyStick Shield with the FRDM Board“) and I do have a Freescale Freedom board: why not creating a simple game for it? Snake!

Snake Game with FRDM-KL25Z Board

My first mobile phone was a Nokia with a 84×48 black/white display, and I loved it for many reasons, including having the ‘Snake’ game (see http://en.wikipedia.org/wiki/Snake_%28video_game%29). An ARM Cortex M0+ is way overpowered for that simple game, still it is fun to make and game it :-).

The game is very simple: A snake is running around, and I can control it with the cursor/joystick with up, down, left and right. The snake has to ‘eat’ the ‘food’, and the snake gets longer the more food is eaten. But the snake shall *not* touch the outside border.

💡 Usually there is another rule that the snake shall not touch itself. But I was too lazy to make it.

Snake with Food

For the project I ordered a black joystick shield for $11.27, as the soldering quality of the previous ‘white’ one was very bad. The Nokia 5110 LCD I ordered from DX.com for $3.87 so it would directly match with the joystick shield. So makes $30 in total including the FRDM-KL25Z board.

Startup Screen for Snake Game

Ready to Play Snake Game

The video shows the game in action:

The Snake game runs as a FreeRTOS task. The drawing and graphics including fonts are implemented with Processor Expert components:

Graphical Display Driver

Font and Font Driver

Summary

So I have another nice usage for my boards and the joystick shields :-). I need to admit that I’m not very good at the game. My daughter reached level 4 in the first attempt, while my max level is 2, maybe it is just the age ;-). But I’m too honest *not* to build in a cheat mode, or should I? Maybe 😉

As always, the sources are available on GitHub.

Happy Snaking 🙂

32 thoughts on “Snake Game on the FRDM-KL25Z with Nokia 5110 Display”

Hillbilly Injunear on July 8, 2014 at 00:21 said:

Good job Erich.

And, yeah… put in a back door cheat option. Tell your daughter if she finds it you’ll buy her ice cream.

LikeLike

Reply ↓
Karibe on July 26, 2014 at 23:50 said:

Nice!! You gotta love those. I ordered the joystick shield, and meanwhile been playing with some cheap Nokia LCDs, one onochrome and one Color, Posted on my blog. I just have to make my LCD breakout compatilbe with the shield, then try some games. Thank you for sharing.

LikeLike

Reply ↓
- Erich Styger on July 27, 2014 at 05:27 said:
  
  Yes, saw that boards you made, very cool!
  
  LikeLike
  
  Reply ↓
k.kanas@qub.ac.uk on April 14, 2015 at 16:34 said:

Erich

I used GDisp1 in conjunction with PDC8544 component. I am getting errors GDisp1.c:136: undefined reference to `GDisp1_GetWidth’ .All references to header files were generated by processor expert. Just wonder whether there is an issue with the codewarrior version. I am using codewarrior 10.4? Can you please advise how rectify this error?

LikeLike

Reply ↓
- Erich Styger on April 14, 2015 at 16:46 said:
  
  In the GDisp1 component, right click on the GetWidth method and enable it (Toggle Enable/Disable).
  I hope this helps?
  
  LikeLike
  
  Reply ↓
Kamil on April 14, 2015 at 18:00 said:

Thank you Erich

That sorted my error.

I compiled successfully program. Display works in the text mode. But it stays blank in the graphic mode. I used couple of methods for drawing different figures. I set the color parameter to 7 (black) as I am using nokia 5510 monochrome display. For example

GDisp1_DrawBox(10,10,30,15,5,7); /*Draw box*/

Any idea why this method doesn’t work?
Thank you

Kamil

LikeLike

Reply ↓
- Erich Styger on April 14, 2015 at 20:36 said:
  
  Hi Kamil,
  are you updating the display after drawing with GDisp1_UpdateFull()?
  
  LikeLike
  
  Reply ↓
  - Kamil on April 15, 2015 at 09:55 said:
    
    Erich
    Yes I am updating display with GDisp1_UpdateFull();
    
    LikeLike
    
    Reply ↓
    - Erich Styger on April 15, 2015 at 10:02 said:
      
      Why are you using ‘7’ for the color and not GDisp1_COLOR_BLACK?
      
      LikeLike
Kamil on April 15, 2015 at 12:00 said:

Thanks Erich

GDisp1_COLOR_BLACK sorted my issue.

Now all is working as expected

LikeLike

Reply ↓
CM on December 1, 2015 at 20:45 said:

I need do a snake game with a les matrix (8×8) and Freescale kl46z; you know how I can do that?

LikeLike

Reply ↓
- Erich Styger on December 1, 2015 at 21:31 said:
  
  have a look at the snake game sources: it is not hard to adapt the screen resolution size to 8×8 and update the drawing routines for it.
  
  LikeLike
  
  Reply ↓
Dave_G on December 3, 2015 at 02:51 said:

Hello Erich!
I can write words on the screen using the PDC8544 component, but having problems to print a monochromatic bitmap on the 5110 LCD. I’m using the GDisp1_DrawMonoBitmap method, but i don´t know how to load the *.bmp image on the code. How can I do that?

LikeLike

Reply ↓
- Erich Styger on December 3, 2015 at 10:10 said:
  
  There are several tools which can transform a bitmap/image to an array of hex values you can include into your code, e.g.
  on lpcware.com/content/nxpfile/bmp-c-image-conversion-utility
  en.radzio.dxp.pl/bitmap_converter/
  to name a few.
  
  LikeLike
  
  Reply ↓
  - Dave_G on December 3, 2015 at 16:46 said:
    
    I have the bitmap hex values. But would you explain me how to insert the image pointer. The method ask me for an image pointer…
    
    LikeLike
    
    Reply ↓
    - Erich Styger on December 3, 2015 at 21:45 said:
      
      Hi Dave,
      here is an example of such a bitmap:
      #define ImageWait_IMAGE_WIDTH 0x38U /* Image width in pixels */ #define ImageWait_IMAGE_HEIGHT 0x18U /* Image height in pixels */ #define ImageWait_IMAGE_SIZE 0xA8U /* Image size in bytes */ #define ImageWait_IMAGE_FILE_NAME "waitImage_small.bmp" /* Image file name */
      extern const byte ImageWait_Pixmap[0xA8]; /* Image pixel bitmap */ PIMAGE ImageWait_GetImage(void); static TIMAGE Image; static const char_t FileName[] = "waitImage_small.bmp"; const byte ImageWait_Pixmap[0xA8] = { 0x00U,0x03U,0xE2U,0x00U,0x00U,0x00U,0x00U,0x7FU,0xE2U,0x12U,0x00U,0x00U,0x00U,0x00U,0x80U,0x12U,0x12U,0x38U,0x70U,0xE1U,0xC0U, 0x80U,0x12U,0x12U,0x44U,0x89U,0x12U,0x20U,0xFFU,0xF3U,0xE2U,0x44U,0x09U,0x02U,0x20U,0x80U,0x12U,0x02U,0x7CU,0x78U,0xE3U,0xE0U, 0x80U,0x12U,0x02U,0x40U,0x88U,0x12U,0x00U,0x80U,0x12U,0x02U,0x44U,0x99U,0x12U,0x20U,0x7FU,0xE2U,0x02U,0x38U,0x68U,0xE1U,0xC0U, 0x34U,0x80U,0x00U,0x00U,0x00U,0x00U,0x00U,0x0FU,0x00U,0x00U,0x00U,0x00U,0x00U,0x00U,0x0FU,0x00U,0x00U,0x00U,0x00U,0x00U,0x00U, 0x0FU,0x00U,0x00U,0x00U,0x00U,0x00U,0x00U,0x30U,0x80U,0x00U,0x00U,0x00U,0x00U,0x00U,0x30U,0x80U,0x00U,0x00U,0x00U,0x00U,0x00U, 0x40U,0x60U,0x00U,0x00U,0x48U,0x00U,0x00U,0xC4U,0x70U,0x00U,0x00U,0x08U,0x00U,0x00U,0x8FU,0x10U,0x88U,0x9CU,0x5CU,0x00U,0x00U, 0x8FU,0x10U,0x88U,0xA2U,0x48U,0x00U,0x00U,0xBFU,0x90U,0x55U,0x02U,0x48U,0x00U,0x00U,0xFFU,0xF0U,0x55U,0x1EU,0x48U,0x00U,0x00U, 0xFFU,0xF0U,0x55U,0x22U,0x48U,0x00U,0x00U,0x7FU,0xE0U,0x22U,0x26U,0x48U,0x00U,0x00U,0x00U,0x00U,0x22U,0x1AU,0x4CU,0x24U,0x80U}; /* ** =================================================================== ** Method : ImageWait_GetImage (component BWimage) ** Description : ** Get image information. ** Parameters : None ** Returns : ** --- - Pointer to structure TIMAGE ** =================================================================== */ PIMAGE ImageWait_GetImage(void) { Image.width = 0x38U; Image.height = 0x18U; Image.size = 0xA8U; Image.name = FileName; Image.pixmap = ImageWait_Pixmap; return &Image; }
      
      LikeLike
Dave_G on December 3, 2015 at 16:42 said:

Hello Erich!
I´m trying to print a monochromatic bitmap on the 5110 screen, but I don’t know how to use the DrawMonoBitmap method. It ask me for an image pointer, but i have no idea how to set it up.
How do I do that?

LikeLike

Reply ↓
- Dave_G on December 3, 2015 at 16:43 said:
  
  Sorry, I didn’t notice you’ve already ask me…
  
  LikeLike
  
  Reply ↓
  - Dave_G on December 3, 2015 at 16:49 said:
    
    ***Answer
    
    LikeLike
    
    Reply ↓
Pingback: 3D Printed Gameboy and Remote Controller with tinyK20 Board | MCU on Eclipse
Alex Bob on April 25, 2016 at 14:08 said:

Hello Erich!
Can I have the complete project please?

LikeLike

Reply ↓
- Erich Styger on April 25, 2016 at 15:35 said:
  
  Hi Alex,
  the project and sources are here: https://github.com/ErichStyger/mcuoneclipse/tree/master/Examples/KDS/FRDM-KL25Z/FRDM-KL25Z_Joystick
  You need Kinetis Design Studion with the McuOnEclipse components (see https://mcuoneclipse.com/2014/10/21/mcuoneclipse-releases-on-sourceforge/).
  Erich
  
  LikeLike
  
  Reply ↓
Pingback: Arduino Joystick shield, Nokia 5110 display and BlueTooth – gr33nonline
Pingback: INTRO Robot Remote – First Production PCB | MCU on Eclipse
Bruno Becalli on August 9, 2017 at 20:12 said:

Which program did you use to convert BMT to HEX?

LikeLike

Reply ↓
- Erich Styger on August 9, 2017 at 20:14 said:
  
  BMT?
  
  LikeLike
  
  Reply ↓
  - Bruno Becalli on August 9, 2017 at 22:54 said:
    
    Sorry, .BMP.
    
    LikeLike
    
    Reply ↓
    - Erich Styger on August 10, 2017 at 08:16 said:
      
      There are many utilities you can find on the internet for this. Processor Expert comes with the ‘ExternalFile’ component which can be used for this. It reads e.g. a .bmp bitmap file and produces as source file with the data in an array with hexadecimal values.
      
      LikeLike
Daniel Tonn on September 11, 2019 at 20:01 said:

Erich, regards;

Please, you have a basic tutorial about GFont component? How to create new graphic font? Archive struct, bits and bytes organization/structure…

In “FontBMP[ ]/GFont_CharInfo” the >position of new charoffsets< is in pixels is that so? Because 0x00 Char is not NULL? What would it be? What software you recommend to create individual char constants?

I have gained a lot of knowledge with your material, I am very grateful! That you be very blessed for this. Thanks.

LikeLike

Reply ↓
- Erich Styger on September 12, 2019 at 08:02 said:
  
  Hi Daniel,
  I don’t have a dedicated tutorial, but I see if I can collect some information for you.
  
  Erich
  
  LikeLike
  
  Reply ↓
  - Daniel Tonn on September 12, 2019 at 20:58 said:
    
    thanks, so very much Erich…
    
    LikeLiked by 1 person
    
    Reply ↓
    - Erich Styger on September 17, 2019 at 21:01 said:
      
      I’m really not sure any more how I created them. I checked my tools and traces about it, and this is what I have found:
      I have used Fony (https://fony.en.uptodown.com/windows) to export fonts in BDF format. I’m not sure what tool I have used to convert the BDF files to source and header files, but I have found this one on the internet: https://github.com/pixelmatix/bdf2c
      
      I’m sorry, but I don’t have the complete information somehow, but I hope this helps.
      
      LikeLiked by 1 person