Converting Code

Let’s have a go at converting the event handling code from the control flow chapter.

Here is the final version. Use your own code if you have it, otherwise make a copy of this.

  using SplashKitSDK;
  using static SplashKitSDK.SplashKit;

  const int PLAYER_RADIUS = 50;
  const int PLAYER_SPEED = 3;

  int playerX = 640;

  OpenWindow("Circle Moving", 1280, 720);

  while( ! QuitRequested() )
  {
      ClearScreen(ColorWhite());
      FillCircle(ColorTurquoise(), playerX, 360, PLAYER_RADIUS);
      RefreshScreen(60);

      ProcessEvents();

      if ( KeyDown(KeyCode.RightKey) )
      {
          playerX += PLAYER_SPEED;
      }

      if ( KeyDown(KeyCode.LeftKey) )
      {
          playerX -= PLAYER_SPEED;
      }
  }

Start with the old code

1. Create a new events.cpp file, in your C++ code folder.

2. Paste in the code and then comment it all out

   • Select all the code using Ctrl+A or Cmd+A.
   • Comment out by pressing Ctrl+/ or Cmd+/

   • Code all commented out

         // using SplashKitSDK;
         // using static SplashKitSDK.SplashKit;
     
         // const int PLAYER_RADIUS = 50;
         // const int PLAYER_SPEED = 3;
     
         // int playerX = 640;
     
         // OpenWindow("Circle Moving", 1280, 720);
     
         // while( ! QuitRequested() )
         // {
         //     ClearScreen(ColorWhite());
         //     FillCircle(ColorTurquoise(), playerX, 360, PLAYER_RADIUS);
         //     RefreshScreen(60);
     
         //     ProcessEvents();
     
         //     if ( KeyDown(KeyCode.RightKey) )
         //     {
         //         playerX += PLAYER_SPEED;
         //     }
     
         //     if ( KeyDown(KeyCode.LeftKey) )
         //     {
         //         playerX -= PLAYER_SPEED;
         //     }
         // }

Add library and main

3. The using gives you access to the SplashKit library, so change the using to #include.

4. Next, add in the code for the main function and use it to wrap the last comments.

   • Library included and main added

     // using SplashKitSDK;
     // using static SplashKitSDK.SplashKit;
     #include "splashkit.h"
     
     int main()
     {
     // const int PLAYER_RADIUS = 50;
     // const int PLAYER_SPEED = 3;
     
     // int playerX = 640;
     
     // OpenWindow("Circle Moving", 1280, 720);
     
     // while( ! QuitRequested() )
     // {
     //     ClearScreen(ColorWhite());
     //     FillCircle(ColorTurquoise(), playerX, 360, PLAYER_RADIUS);
     //     RefreshScreen(60);
     
     //     ProcessEvents();
     
     //     if ( KeyDown(KeyCode.RightKey) )
     //     {
     //         playerX += PLAYER_SPEED;
     //     }
     
     //     if ( KeyDown(KeyCode.LeftKey) )
     //     {
     //         playerX -= PLAYER_SPEED;
     //     }
     // }
     
       return 0;
     }

Variables and constants

5. Uncomment the variable declarations first, and adjust their names to match our C++ coding convention (using snake_case for the variables).

   • To uncomment, you can select the lines and press Ctrl + / or Cmd + / to toggle the comments on or off.
   • You can select (double click) an identifier in your code like playerX and then press Ctrl + D or Cmd + D to create multiple cursors. Each time you press Ctrl + D or Cmd + D it will create another cursor at the next matching text. In this case there are four versions, so you can press it four times. Then edit all four at the same time.
   • Alternatively, you can right-click and choose “Rename Symbol”. Enter new the name and press enter.
   • Or, use search and replace.

   Tip

   Learning to use these tips and tricks can help make editing your code faster and easier. Different tools will be useful at different times. Multiple cursors are something that can be really handy at times.

   • Renamed variables

     // using SplashKitSDK;
     // using static SplashKitSDK.SplashKit;
     #include "splashkit.h"
     
     int main()
     {
       const int PLAYER_RADIUS = 50;
       const int PLAYER_SPEED = 3;
     
       int player_x = 640;
     
     // OpenWindow("Circle Moving", 1280, 720);
     
     // while( ! QuitRequested() )
     // {
     //     ClearScreen(ColorWhite());
     //     FillCircle(ColorTurquoise(), player_x, 360, PLAYER_RADIUS);
     //     RefreshScreen(60);
     
     //     ProcessEvents();
     
     //     if ( KeyDown(KeyCode.RightKey) )
     //     {
     //         player_x += PLAYER_SPEED;
     //     }
     
     //     if ( KeyDown(KeyCode.LeftKey) )
     //     {
     //         player_x -= PLAYER_SPEED;
     //     }
     // }
     
       return 0;
     }

Convert logic

6. Next, let’s get the window opening and the loop to process events.

   • Uncomment the related lines of code.
   • Rename each function - changing from PascalCase to snake_case.
   • Try selecting an identifier like OpenWindow and then hitting Ctrl + Shift + P or Cmd + Shift + P and typing “snake”. You should see an option called “Transform to snake case”. Hit that and VS Code will do the work for you!
   • You can select multiple lines, and it will transform all of the identifiers.

   Caution

   If you do this, watch out for your constants. They still need to be UPPER_CASE. There is a “Transform to Uppercase” as well if you need it.

   • Event loop converted

     // using SplashKitSDK;
     // using static SplashKitSDK.SplashKit;
     #include "splashkit.h"
     
     int main()
     {
       const int PLAYER_RADIUS = 50;
       const int PLAYER_SPEED = 3;
     
       int player_x = 640;
     
       open_window("Circle Moving", 1280, 720);
     
       while( ! quit_requested() )
       {
           clear_screen(color_white());
           fill_circle(color_turquoise(), player_x, 360, PLAYER_RADIUS);
           refresh_screen(60);
     
           process_events();
     
     //     if ( KeyDown(KeyCode.RightKey) )
     //     {
     //         player_x += PLAYER_SPEED;
     //     }
     
     //     if ( KeyDown(KeyCode.LeftKey) )
     //     {
     //         player_x -= PLAYER_SPEED;
     //     }
       }
     
       return 0;
     }

7. Convert the remaining code. The KeyCode.RightKey goes to a constant RIGHT_KEY in C++.

   • You can use Transform to Uppercase for the constant.
   • I did the following:
     • Select the first KeyDown
     • Create two cursors with Ctrl + / or Cmd + /
     • Used “Transform to Snake Case” Ctrl + Shift + P or Cmd + Shift + P
     • Press the right arrow and selected both KeyCode. (hold shift and click the right arrow to select characters and words)
     • Press delete to remove both.
     • Selected RightKey and LeftKey using Ctrl + Shift + Right Arrow to select the whole word.
     • Used “Transform to Uppercase”
     • Pressed escape and added the missing _ so that I had RIGHT_KEY and LEFT_KEY.

   • Finished code

     #include "splashkit.h"
     
     int main()
     {
       const int PLAYER_RADIUS = 50;
       const int PLAYER_SPEED = 3;
     
       int player_x = 640;
     
       open_window("Circle Moving", 1280, 720);
     
       while( ! quit_requested() )
       {
           clear_screen(color_white());
           fill_circle(color_turquoise(), player_x, 360, PLAYER_RADIUS);
           refresh_screen(60);
     
           process_events();
     
           if ( key_down(RIGHT_KEY) )
           {
               player_x += PLAYER_SPEED;
           }
     
           if ( key_down(LEFT_KEY) )
           {
               player_x -= PLAYER_SPEED;
           }
       }
     
       return 0;
     }

8. Save your work.

9. Compile and run (if you haven’t already)!

Are you sure this is all?

Yes! This is all you need to change. Notice that the logic is identical line for line. This is why we want you to focus on the mental model. When you understand how to use these tools, you can then apply them to whatever language you need for your next project.

Is it always this easy?

Usually the main challenge is the difference in the libraries that you have available. The syntax for the statements is the easy part, and the part we are doing here as we can use the same library. When you learn your first language in depth, the bulk of the time is learning what is in the library and how you can use it to achieve different things.

This is part of the reason why we build the SplashKit library. It will allow you to focus on the language and logic for now. Once you have a solid understanding of these foundations we can move on to learning different libraries we can use.