Joystick fun

So I am starting to understand how this works thanks to the samples in the Code section

I can put a cursor on the screen and have the joystick move it around but it leaves a trail on the screen and while it looks all cool and tripy it is not what i want



using System;
using System.Collections;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Touch;

using Gadgeteer.Networking;
using GT = Gadgeteer;
using GTM = Gadgeteer.Modules;
using Gadgeteer.Modules.GHIElectronics;

namespace JoystickTest
{
    public partial class Program
    { 
        private uint displayWidth;
        private uint displayHeight;
        private int cursorXPos;
        private int cursorYPos;
        private Bitmap cursor;
        private int lastYpos;
        private int lastXpos;
        void ProgramStarted()
        {
           
            displayWidth = display.Width - 7;
            displayHeight = display.Height - 7;
            DrawHomeScreen();
            cursorXPos = (int)displayWidth / 2;
            cursorYPos = (int)displayHeight / 2;
            lastXpos = -1;
            lastYpos = -1;
            Timer timedEvent = new Timer(updateJoystick, null, 0, 10);     
            cursor = new Bitmap(15, 15);
            Debug.Print("Program Started");
        }
        private void updateJoystick(Object o)
        {
            // A Timer calls this method every 50ms

            int x = (int)((joystick.GetJoystickPostion().X * 2.0 - 1.0) * 5);
            int y = (int)((joystick.GetJoystickPostion().Y * 2.0 - 1.0) * -5);
           
            cursorXPos += x;
            cursorYPos += y;
            if (cursorXPos < 0) cursorXPos = 0;
            if (cursorXPos >= displayWidth) cursorXPos = (int)displayWidth - 1;
            if (cursorYPos < 0) cursorYPos = 0;
            if (cursorYPos >= displayHeight) cursorYPos = (int)displayHeight - 1;
            
            DrawCursor();
        }
        private void DrawCursor()
        {
            if (lastXpos == cursorXPos && lastYpos == cursorYPos)
                return;
            // display.SimpleGraphics.DisplayImage(homeScreen, 0, 0);
            display.SimpleGraphics.DisplayImage(cursor, (uint)cursorXPos, (uint)cursorYPos);
            lastXpos = cursorXPos;
            lastYpos = cursorYPos;
        }
        private void DrawHomeScreen()
        {
            display.SimpleGraphics.BackgroundColor = GT.Color.Blue;        
        }    
   
      }
   }

do I need to set a timer to redraw the screen and only show the cursor?

I don’t have a display to test with… But couldn’t you just add a line to DrawCursor() that redraws at (lastXpos, lastYpos) with the background color before drawing the new cursor?

Like Ian said

you’ll need to clear the previous position of the cursor first, however this may not give you what you need further down the line.

Imagine you are drawing your screens from the ground up starting with the stuff that is far in the background moving to the top (most likely your cursor)

So from my little bit of game programming experience your should aim for something like the following;

one message loop (like your updatejoystick) that:

Gets latest inputs
Performs any processing
Render Display
–Render Background
–Render Stuff (Icons maybe)
–Render Cursor

Later down the line you can get more complex to increase performance by only re-rendering part of the screen, but to start with I would suggest rendering the whole thing until performance is an issue.

Hope this helps

^^^ Great advice btw. Most games follow the Input(), Update(), Render() in a loop pattern, and I’ve found that it works really well for simple display applications like this quite well. When you get to where you need to increase speed, rendering is (almost) always the first place to look. But for now, you should be safe with just clearing the screen every update.