Beginner's Tutorial

Welcome! In this tutorial you will learn how to create a simple card game on Screentop.

Getting started

  1. Log in or sign up

  2. Go to your profile page

  3. Create a new game

  4. Enter the editor by clicking Edit Game

Creating a single card

Let's start by creating a single card that we can interact with.

  1. Save this image to your computer

  2. Go to the Assets section

  3. Create a new asset and set:

    • Name: Cards
    • Image: Upload the saved image
    • Rows: 5
    • Columns: 13
  4. Go to the Components section

  5. Create a new Tile component and set:

    • Name: Card
    • Shape
      • Kind: Rectangle
      • Width: 160
      • Height: 224
      • Radius: 16
  6. Go to the Variants section of this component

  7. Edit Variant 1 and set:

    • Asset: Cards
    • Asset Index: 1
    • Back Asset: Cards
    • Back Asset Index: 53
  8. Go to the Objects section of this component

  9. Create a new object of this component on Surface 1

Success! We've created a single card - the Ace of Clubs. Now if you join Seat 1 in the main view, you will be able to interact with this card. Try moving it by dragging / dropping, rotating it by pressing R, and flipping it by pressing Space.

Creating the full deck

Now let's extend this component so that we can create a full 52-card deck.

  1. Return to the Variants section of this component

  2. Create 51 copies of Variant 1 by selecting Clone... from the item menu

  3. Select all 52 variants and click the Edit button in the top menu

  4. Now we will set the Asset Index of each variant to reference a different cell of the Cards asset. Change the editVariant function to:

    function editVariant(variant, index) {
      return {
        assetIndex: index,
      };
    }
    

    Notice that the JSON input below updated with new Asset Index values from 1 to 52.

    Click Save to confirm these changes.

  5. Return to the Objects section of this component

  6. Now we will create the full deck of cards by repeating steps 2-4, but with objects this time. Clone 51 objects from Card #1 and then edit each object's Variant with:

    function editObject(object, index) {
      return {
        variant: `Variant ${index}`,
      };
    }
    

    And Save.

Success! We've created a full deck of 52 cards. In the main view, you can multiselect all of these cards using Control + Click or Double Click, and then shuffle the cards by pressing Z.

Creating a hidden player hand area

Finally, let's create a component that can hold cards and hide them from other players.

  1. Go to the Components section

  2. Create a new Container component and set:

    • Name: Hand
    • Shape
      • Kind: Rectangle
      • Width: 512
      • Height: 256
      • Radius: 16
  3. Go to the Dropzones section of this component

  4. Create a new Anchor dropzone and set:

    • Child Components: Card
  5. Go to the Anchors section of this dropzone

  6. Create a new Line Anchor

  7. Go back to the Objects section of this component

  8. Create a new object of this component on Surface 1 and set:

    • Seats: Seat 1
    • View Policy: Only Seats

Success! We've created a component that can hold cards and hide them from other players. In the main view, move some cards into this Hand #1 object. Now if you leave Seat 1, the cards in this container will be hidden from you.

Testing the game

Almost done! Now let's test this game that we've created!

  1. Return to the game's profile page

  2. Start a play session of this game by clicking Play Game

Next steps

Congrats! You've completed the tutorial and are ready to create your own games!

If you have any questions, we're happy to help on Discord.