Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    Virtual Joysticks for User Input

    3D Blocks
    1
    1
    157
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      Introduciton

       

      You can now add joystick-style user controls for your 3D games, which is a natural input method for users on touchpads and smartphones.

      Note that this new feature only works in 3D projects, and a 3D scene must be initialized first.

      joy.gif

       
       

      Add a Joystick

       

      A virtual joystick is made of 2 parts:

      • A “base” that is composed of 2 circles. Whenever the pointer is pressed down, the base will not move as the pointer is dragged around it.
      • A “puck” that is a smaller circle with a dot at its center. It shows the current position of the pointer relative to the base.

       
      a8027378-beb1-4d73-9a39-d4d128f4f0c5-image.png

      You can add a new joystick using the following block:

      4bb6149b-de59-4249-9f70-59f503e8e92e-image.png

       
      The inputs are:

      • Left or Right: you can add a left or right joystick using this block. The left one only covers the left half of the screen, and the right one only covers the right half. Use this block 2 times to add both joysticks.
      • Color1 and Color2: These two color inputs control the colors of the base and the puck.
      • Scale: This is a scaling factor that controls the size of the virtual joystick. By default, it is 100, which means 100% of the default size. If you would like to double the size of the joystick, you can set this value to 200.

       
       

      Read joystick properties

       

      You can read the properties of a joystick using this reporter block:

      232b6132-f657-4750-8c3c-ff51abe69ddc-image.png

       
      It has 2 inputs:

      • Side: left or right
      • Property:
        • x or y: the position of the puck relative to the center of the base. Note that both x and y are between -1 and 1. For example, if the puck is at the right edge of the base, then x will be 1 and y will be 0.
        • dir: the direction of the puck relative to the base in degrees, which is between -180 and 180.
        • Distance: the distance of the puck from the base between 0 and 1.
        • pressed: whether the joystick is pressed down. 0 means not pressed down, and 1 means it is pressed down. This should be the first value to check, since if the joystick is not pressed down, then all the other properties are not valid.

       
       

      Remove all joysticks

       

      You can use this block to remove all the joysticks you have added so far:

      a2e02fc4-f3bc-474b-9f7f-35f17a72c3e8-image.png

       
       

      Demo

       

      In this demo program, we first add a 3D glass object, then add 2 virtual joysticks of different colors and scales. Then we enter a forever loop: whenever the left or right joystick is pressed down, we read its properties into a few variables, and also rotate the 3D glass based on the “dir” property:

      blocks (42).png

       
      Here is the project link:

      play.creaticode.com/projects/673e98585e434ba9fd49f96a

      1 Reply Last reply Reply Quote 1
      • First post
        Last post