Bitsy 3D
a bitsy fork by aloelazoe that adds 3D to bitsy, a little editor for little games or worlds
advance tip : use aloelazoe other tool to save time: bitsy-savior
check out what you can do with bitsy 3D in the
- gallery on this site or
- with the Hashtag Bitsy3D on Twitter or
- browsing the collection by elkie on their itch.io page
a website made by Kai Werder
Sleepi Boi by thatsmaik
i am still here by cecile richard
Rusty Blade by me (Kai)
Sister Spring Brother Winter by Ash
Tutorial
About
Bitsy 3D was designed by Aloelazoe to create 3D Bitsy games. It is a fork, that is to say that it has a common base with another engine, in this case Bitsy by Adam Le doux.In this guide we focus on the specifics of the 3D version. If you don’t know Bitsy feel encouraged to read the tutorial by Claire Morwoord.In this guide feel free to jump of the guided tour and trying out values or options on your own. You can always come back to this guide.This guide is a translated and slightly modified version from the tutorial Paulette made for Pang Pang Club in french 🇫🇷 and it's available here.let's begin with the specificities of Bitsy 3D:
The specificities of Bitsy 3D
Compared to Bitsy, this version has two additional tools (or windows):
3d scene and 3d settings
3D Scene
3d scene is the window in which you will preview and play your game, it replaces here the room window that you normally use for these functions in vanilla Bitsy.You can navigate the 3D scene with the mouse by holding down the left mouse button and moving in one direction. You can also zoom with your mouse wheel or pan the camera with the right mouse button held down.To help you navigate the 3d scene it is helpful to understand the coordinate system at the top right with the different axes X, Y, Z
X = horizontal axis
Y = vertical axis (up and down)
Z = depth axisYou can place assets like new tiles with the left mouse button in the 3d scene window or the in the room window. You can erase your placed tiles by holding down Control on your keyboard + left-clicking in the scene. The asset will be placed down where the green box is under your mouse pointer.(Assets here mean: the avatar, tiles, sprites, items basically everything in the paint window)
3d Settings
In the 3d settings there are three tabs: mesh, camera and game
camera
To begin with, I encourage you to look at the camera options.
You can preview the camera by pressing the first button and change through the different presets, so you can easily have a camera that follows the player from above or even a dungeon crawler. These different pre-sets set the different values that are hidden in the advanced camera settings.Just experiment if you like the camera closer or farther away, or maybe you want it to use keyboard buttons to change and not the camera.Just keep in mind :
the camera settings are set for all scenes you create.
Changing the camera type while creating a game may require you to rework the layout of some of your elements.
In short, don't rush into anything until you are sure of the type of camera you want to use. In fact, don't hesitate to make diagrams, to draw your rooms to help you picture them. (This is a tip that works for all game designs).
game
In the game menu you find classic Bitsy options, such as the settings for the size of your game but also settings unique to Bitsy 3D.The most notable option is the ability to activate and set a fog effect in your game, enable fog. The lower the values in fog start and fog end, the more present and denser your fog will be.
mesh
First of all below the mesh tab you should see the name of the asset that is selected.If you open Bitsy 3d for the first time, chances are that the name is sprite A which refers to the avatar, or tile a: block. The selected asset is always the one that is open in the paint window.Checking the selected asset is always important, so you are not accidentally changing the values of the wrong asset.
The options are as follows:
| Setting | Explaniation |
|---|---|
| Type | Here you can select the 3D primitive / way the sprite displays |
| Transparent background | If ticked, these options makes the not painted pixels on your asset transparent. |
| Opacity | Value between 0 and 1 which can be manipulated, so the object is only partly visible |
| Hidden – only show in editor | Hides your asset so that it is only visible in the room and 3d scene editor. |
| Transform | This allows you to obtain three new options, translation, rotation, and scale, each of which has three values corresponding to the values of the X, Y and Z axes. (by default, the options linked to transform are hidden, you must pull down the associated menu. ) |
Note: Except the hidden option, all changes made to your assets are directly visible in 3d scene
In depth: transform
With the transform you can let assets be in a different place on the screen as their position on the grid. The values can be positive or negativeSo, if you for example add a 1 to the X move box, then the asset will be one to the right.Note: you can only interact with the asset on its place in the room window. So if it is one to the right the player will straight through it, because as far Bitsy is concerned there is no asset on in this place.If you feel comfortable with the transform options you can make more complex assets like roofs as Nuttatulipa explains in one tweet (embedded below) for their game Server Close.
Depending on the type of asset, Nuttatulipa adapts the position of the asset, the rotation and the size. Some of the values are very precise and result from extensive testing and observation.Hint: One of the best uses I found was having a different floor so putting the asset one meter in the air only to manipulate the move Y box so it looks as it is again on the ground.
In depth: children
There is one element that has not yet been discussed, the children tab. It is located right next to the base tab. You can attach a child asset to a base asset which acts as a parent. This is also something that can be found in more classic engines (Unity, Godot).You do this by dragging a tile from the find drawing window into blue rectangle it creates. You can then edit the children’s relative 3D settings, so they are always on one particular side of the base asset.
Bitsy 3D and its 3D / verticality
Here you are creating in a 3D environment, so you can actually build into the third dimension.You may have noticed that a green cube appeared in the interesting when placing cubes or towers in our room, as it becomes possible to place assets above (relative to the Y axis) of our elements. This leads to the creation of a new room in the room window.By holding down the Control Key (Ctrl) you can have a grid everywhere you want. This way you can place assets in the sky.Hint: before putting down anything in a new room, stack up some cubes so Bitsy 3D creates the height levels in the right order. That way you can just click through the rooms in the room window and the next room will always be the right above the current one.
About Hacks
Not every hack for the current Bitsy version will work, as Bitsy 3D is at version Number 7.3. It might work just a heads up.
One last thing
If you are creating more often in vanilla Bitsy or using forks as this one, think about using bitsy-savior also by aloelazoe I find it very helpful as I often delete my cookies in my browser and it has some advantages
If you've got questions
In your journey to create to have a fun with bitsy 3D and you find yourself stuck or wish that this tutorial explained a point better shout a message to me/Kai