🕹️ Quick Guide: Your First Platformer Game in GameCrom

1. Create a new project

Enter GameCrom.
Click New Project.
Give it a name, for example: My First Platformer.
The editor will load an empty scene.
Click the button 💾📝 "Save Scene As" (second button from the left in the top menu)
Give it a name and click OK.

2. Create the player

Open the Sprite Gallery.
Select a character sprite (or upload one).
You can also create your own sprite in the engine’s Sprite Editor, accessed from the MiniArt button in the top panel.

Click the GameObjects button in the top menu to add an object.
In the Players section, click Platform Player.

With the object selected, in the inspector you can see all its properties. You will notice the Script property already has a script assigned (player_platform.js).
This script is responsible for handling the player's movements and animations.

Your object currently has no assigned image, only color.
With the object selected, you can assign an image by clicking any sprite in your gallery.

In the inspector, change:

• Name: Player
• Width/Height (ScaleX, ScaleY): 1 × 1.4 (or the size that best fits your sprite)

3. Create the ground and platforms

Create a new GameObject.
Name: Ground
ScaleX: for example, 7
ScaleY: 1
Position it below the player.
Assign a sprite to give it a ground texture, just like we did with the player.
You can make the texture repeat horizontally by changing the Tiling X property to 7 (same as ScaleX).

Notice that in the object properties there is a Layer property. Your default layer is 10 or the one selected in the Options panel Layer selector.
Layers in GameCrom are display layers.
The scene is ordered by layers; there are a total of 32 layers.
This affects the order in which objects appear in your scene.
The higher the layer, the more "in front" the object appears.
For example, a Layer 9 object appears behind a Layer 10 object.

Objects with the same Layer may appear in front or behind each other depending on creation order.

In the scene we are working on, you can only select objects with the same Layer as the one selected in the Options menu.

In the Hierarchy panel you can select any object regardless of its Layer. At the top of this panel, you can enable "View Layer in name" to display the Layer next to each object name.

You can change the active working Layer in the Layer section of the Options panel. The button (🔍 Select Object’s Layer) lets you quickly switch to the Layer of the selected object.

Understanding how Layers work is essential to correctly organize your scene.

➕ Clone platforms

Select the ground.
Press Ctrl+D or click the Clone button in the top menu to duplicate it.
Place the cloned object wherever you want in your level.

Before testing our scene, we need to save the changes.
Click the 💾 "Save Scene" button (first button on the left of the top panel).
(Note: Hover your mouse over the buttons to see their descriptions.)

Once saved, click the 🎬 "Play Scene" button in the top panel to test your game.

A new browser tab will open with your game.

You can move your player with the keys: A, D, Cursor Left, Cursor Right, Space to jump. You can also use a Gamepad, as the script supports it by default.

When finished testing, close the Play tab.

4. Add a simple enemy

Import a sprite for the enemy.
Create a new GameObject and name it Enemy, then assign its sprite.
Add two new GameObjects of type Waypoint.
Rename them Waypoint_1 and Waypoint_2.

Place the enemy on the second platform we created, roughly in the center.
Place Waypoint_1 at the top-left of the platform.
Place Waypoint_2 at the top-right.

To bring our enemy to life, we will create our first script.

Click the 💻 "Code Editor" button. This opens the GameCrom code editor.
This is where we program scripts for our game.
In the dropdown at the bottom-right, you will see only one script: "player_platform.js", added automatically when creating the Player.

GameCrom includes a library of example scripts. Click the "Script Library" button in the top-right of the code editor.

A new browser tab will open with the list of available scripts. You can switch between English and Spanish using the flag icons.

Click the option "Enemy — Patrol between two points". You will find an explanation and the full source code.
This script makes an object move between two points, and if it collides with the player, the scene resets.

Copy the full code and return to the editor tab.
Click "Create script" to add a new script, name it Enemy.
Delete its content and paste the copied code. We won't worry about understanding it yet.

Click "Save Script" and then "Close".

Congratulations! You’ve created your first script in GameCrom.

Select your Enemy object and assign the script Enemy.js in the Script property. (Note: Each GameObject can use only one script.)

To allow the enemy to move and detect collisions, disable Static and enable Trigger in the Inspector.
Trigger mode removes physical collisions but still detects them through events such as OnTriggerEnter, OnTriggerStay, OnTriggerExit.

Save your scene and click Play Scene.
The enemy will move back and forth between the two Waypoints, and if it collides with the player, the scene will restart.

5. GameManager Object

Create a GameObject → Name: GameManager
Disable Visible so it doesn't appear in Play mode.
Disable Collision so it has no collision.
Move it outside the camera area (green-frame zone).

Create a new script named GameManager

Delete its content and add only this line:

var CoinsCollected = 0;

This creates a global variable (accessible from any script) named CoinsCollected starting at 0. It will store the number of collected coins.

Assign the GameManager script to the GameManager object.

In summary: We created an invisible, non-colliding object that contains a script to manage the number of coins collected.
You can add more global variables or game-wide logic to this script.

6. Create a Collectible Object

Gallery → upload a star or coin sprite.
Create an object → Name: Coin
Change Collision Type to Circle
Enable Trigger

Create a new script and name it "CoinControl"

It should look like this:

function OnTriggerEnter(obj, other) {
 
  if (other.name == "Player")
  {
        CoinsCollected += 1; // Increases the value of the CoinsCollected variable by 1
        // PlaySound("coin.mp3", 1); // Optional if you added a sound to the sound gallery
        destroyObject(obj); // The object destroys itself
  }
  
}

Save your script and assign it to the Coin object.
Clone the Coin object and place as many as you want in the scene.

Note: All objects have a "Save as prefab" button. This creates a Prefab: a complete copy with all its properties, script, and components.
It is stored in the Prefabs section of your project.
Access your prefabs through the 📦 "Prefabs" button.
Prefabs allow reusing objects without recreating them from scratch.
Changes made to the original object do not modify the prefab.

Save your scene and run your game.
When the player touches a coin, it disappears and CoinsCollected increases.

But we still cannot see how many coins we have.
Let’s create a UI component for it.

Add a UI Text object and place it at the top-left corner inside the camera frame.
Name it: Coin_text

Go back to the code editor and open the GameManager script.
Add this code below the existing one:

function Update(obj, dt) {
  const label = getObjectByName("Coin_text"); // We find the UI object
  label.text = "Coins: " + CoinsCollected; // Update the text with the number of collected coins
}

Save the script, close the editor.
Save your scene and test the game.
You now have a coin counter on-screen.

You can adjust the UI Text properties to customize its appearance.

Script Parameters

If you open the Player script, at the top you will see the variable declarations.

    let anim;

    function Start(obj) {
      cameraFollowTarget = obj;
      obj.type = "player";
      obj.slopeStep = 15;
      obj.speed = 60;
      obj.jumpForce = 120;
      obj.maxFallSpeed = 1200;
      obj.vx = 0;
      obj.vy = 0;
      obj.onGround = false;
      obj.onPlatform = null;
    
      anim = getComponent(obj, "AnimationController");
      if (anim) PlayAnimation(obj, "Idle");
    }

cameraFollowTarget = obj;
If in the Options panel we enable Camera follow player AND this line exists in the script, the camera will follow the Player or any object that contains this command.
Only one object in the scene should use this command at a time.

obj.slopeStep = 15;
If the next object the player walks on has a small enough height difference (less or equal to the Player Platform’s Slope property), the player will automatically step up.
You can increase or decrease this value depending on the size of the steps you want.

obj.speed = 60;
Defines how fast the Player moves.
Adjust this to the speed you prefer.

obj.jumpForce = 120;
Defines how high the Player jumps.
Adjust it to change the jump height.
Note: In the inspector you will find the Gravity parameter, which adjusts the gravity applied to your object.

obj.maxFallSpeed = 1200;
Maximum falling speed when the Player is in the air.

obj.vx = 0;
obj.vy = 0;
These control the horizontal and vertical velocity of the Player.

obj.onGround = false;
Indicates if the Player is touching the ground.

obj.onPlatform = null;
Indicates whether the Player is standing on an object with the PlatformMover component.

anim = getComponent(obj, "AnimationController");
If the object has an AnimationController, it is assigned to anim.

if (anim) PlayAnimation(obj, "Idle");
If the animation component exists, it plays the animation named Idle.
The script is prepared to play the correct animations for each movement, as long as they are created and named exactly as referenced in the script.

Creating Animations

You can create animations for your objects by adding the AnimationController component in the Inspector.
In the Add Component selector, choose AnimationController.
This will add a button below: Open Animation Editor.
That button opens the animation editor where you can create all animations needed for your object.
The AnimationController can be added to any GameObject.