Create Your First Game
Last updated
Last updated
Now that you've completed the Initial Setup, let's create a simple game! In this walkthrough, we'll cover some fundamental concepts of building a game with the HYTOPIA SDK.
It's time to bust out our code editor. We recommend VSCode or Cursor, but you're free to use whatever you'd like.
Now, open up the project directory in your code editor that we create in the Initial Setup.
Your file tree should look something like this:
Make sure your server is running. You can learn more about how to do this in the Initial Setup guide.
Also make sure you're connected to your running game server through https://play.hytopia.com so you can see your changes in real time as you follow this guide.
In this example, we'll be using the world generated by default when we performed bunx hytopia init
. However, in almost all cases you'll probably want to create your own world with its own textures, look and feel. You can do that by following the Build Your First World Map guide.
Open up the index.ts
file in your editor. This is the entry point for your game. All HYTOPIA games are initialized with the startSever()
function. This function internally handles all low-level game setup from initializing the physics engine, opening up the server to websocket connections, and more - all without you ever having to deal with any of those complexities.
startServer()
expects a callback, which is the init function for your game. This init function is where all of the setup of your game should happen - loading your map, spawning initial entities, defining callback and tick callback logic, and more. After your init function is ran internally by startServer()
, your server will open to connections.
Entities are a core concept in games, they often represent NPCs, player characters, interactable objects like vehicles, and more. In HYTOPIA, you'll use an Entity for any object in your game that is not a terrain block.
Entities internally are represented as a Rigid Body with one or more Colliders. This is what defines how they interact with the physical world. Such as colliding with walls, bouncing off of things they hit hard enough, rolling down slopes, and more.
If you're unfamiliar with what a Rigid Body or Collider is in the context of game development, here's a quick explanation:
Rigid Body: In a game physics engine, a rigid body is like a solid object that doesn't bend, stretch, or change shape—it stays the same no matter what happens to it. When you assign a rigid body to something in your game, you're telling the physics engine to handle its movement and interactions realistically. This means the object can move around, fall due to gravity, collide with other objects, and respond to forces just like things do in the real world.
Collider: A collider is an invisible shape attached to a game object that defines its physical boundaries for detecting collisions. Think of it as the object's "collision shape." It doesn't have to look exactly like the object; it can be a simple shape like a box or a sphere that roughly matches the object's size. Colliders allow the engine to calculate when two objects touch or overlap so you can trigger events like damaging a character when they fall and hit a block or picking up an item when they walk over it, and much more.
In this example, we'll create a basic spider entity.
We've spawned a spider! It doesn't do much, but we've learned a lot here!
Here's some takeaways from this example
You can import any .gltf model into your game to represent your entities, just throw them into your projects assets/models/
directory.
You have full control over your entities scale, animation state, and much more.
You have full control over the physical world representation of your Entity's RigidBody and Colliders.
You can spawn your spider when you're ready, by provided the world it spawns into, and the coordinate to spawn at in the world.
If all went well, we should see a spider. Also, notice those lines around our character and the spider? Those are the debug lines of our colliders attached to our Spider and Player Entity! This debug feature is super helpful for debugging our entities and their physical interactions in the world.
This isn't much of a game yet... let's do something simple. How about every time our character runs into the spider it gets bounced in the direction we hit it from, and also has a bit of a spin applied to it?
We can do this with a few lines of code and using a onEntityCollision
callback.
After you've updated your code in your init function to use the onEntityCollision()
callback, your spider when you run into it should behave something like this:
Here's the complete code for our basic push the spider game.
That's it! We've made a really simple game of push the spider. This covered a lot of basics such as spawning entities, creating a collision callback, applying an impulse to move the entity, and more.
The best next steps to continue quickly learning all you can do with the HYTOPIA SDK is to...
Build your first world map: Build Your First World Map
Learn more from our official examples: Use Templates & Examples
Build Your First World Map
Learn how to use HYTOPIA tools to create your first world.