- The Navbar. It provides an easy access to import/export options and to publish the project as a ready-to-go package for the web.
- Run my code/Stop. Here you can run the code or stop your project. Every time you change any line of code you can simple press Cmd+S to save and run it.
- Quick access. Here you have a quick access to undo/redo on to check or uncheck the Autosave option.
- Code editor. Here you can directly edit your code using the Sumolib API as explained below.
- Project running. The result of running the code of the code editor on the left side.
You can export any project as .sumofile format. With this file you can share it to a friend/teacher or import it later if you want to continue on an upcoming coding session.
You can import any .sumocode file exported with the app. When it's loaded, you only need to save (Cmd+S) to run it.
If you are a PRO user, you can download your code in a package that is ready to be published as a webpage. The .zip file contains an index.html + CSS file + js file with the Sumolib included.
You can undo/redo the code you have written pressing the Quick access buttons or on the navbar Edit/Undo or Edit/Redo
If you have checked 'Autosave', it saves your code locally every time you edit it, so if you refresh your page or close your browser, your code will be the same when you come back to it. If you have it unchecked, you need to export it, and import it the next time you want to work on your project.
Sumocode will suggest some values to the sumo objects. In example, if you start by 'sumo.', you might want to use the sumo.background method.
Sumolib API - Core
It is the basis of all our code. It is a MUST to have it declared as 'var sumo = new Sumo.Core()' as a first line of our code. With this we can have access to all their properties and methods that are explained below:
If you want to add any 3D object to the scene, you need to use this function, the only parameter that it has is a predefined Sumo 3D object you have declared.
It is a boolean (true or false) property that determines whether the project has audio enabled or not.
To use this method, first you need to set 'sumo.audio = true' to activate audio on the project, then you can add it using a unique id, and the audio URL as a string. To play it, you need to dispatch the playAudio method passing the 'id' as a string.
This is one of the first things you can set on your scene. You only need to add a hexadecimal value, but it is easier to do using the constant Sumo.Color.
You need to set sumo.interactive = true to make it work. Using the constant Sumo.CameraMovement, you can set it to 'None', 'Teleport' and 'FollowHighlighted'. This is useful if you set an 3D object as 'highlighted' and you plan to move it using the Gamepad class.
This is a boolean value that adds a default fog with the background color to hide further objects or smooth them if you move further from the scene origin.
This is another boolean property that needs to be set as true if we want to interact with the 3D objects in our project.
If you want to use Sumo.Material.Advanced and/or shadows, it is mandatory to have sumo.lights=true to add a basic setup of lights to your scene.
With this property you can add background music to your scene, we have 5 predefined sounds for a constant named Sumo.Music. You need to set sumo.interactive and sumo.audio as true to make it work, and to have the focus of the mouse/touch screen on the scene container.
You can set any 3D object on the scene, then a 3D icon appears on top of the object. You can use it combined with 'sumo.cameraMovement = Sumo.CameraMovement.FollowHighlighted' to follow the object highlighted in that moment. You can change it dynamically on your code through 3D object interactive methods (like click).
You need to set sumo.audio=true and add audio using sumo.addAudio() method. Then you can dispatch it using a click event on any object3D on the scene.
Set up a gradient as a background for your project using a Sumo.Color as colorTop and colorBottom.
This is an important boolean (true or false) property of the core. Only if you have 'sumo.shadows= true' and 'sumo.lights=true' you can view shadows projected.
We have multiple terrains predefined to work with. You only need to type Sumo.Terrain. and select one as sumo.terrain property. Be careful, because some of the terrains fit better with a different sumo.perspective property.
Sumolib API - 3D
Sumo Objects 3D
Any 3D object you add to the project has all of these properties and methods. Take in count that Sumo.Box, Sumo.Circle, Sumo.Cone, Sumo.Cylinder, Sumo.Dummy, Sumo.Plane, Sumo.Prefab, Sumo.Sphere and Sumo.Text inherit these properties and methods.
This method is used to add an object as a child on its parent. The child inherits position, rotation and scale of its parent.
click() = function ()
You can define a function when the user clicks the object. You must set interactive=true on the sumo project and the object itself to make it work.
You need to set as true to enable methods like click, over or out.
This boolean defines if your object looks like a low poly object or with its faces smoothed. By default flat = true. You need to set object.flat=false to have the surfaces smoothened.
This is useful if you want to show or hide an object dynamically. For example when you are clicking an object.
By default is set as 'basic' (Sumo.Material.Basic) like an unlit material that it is useful to use withouth lights and using textures on it. You can also set the material as 'advanced' (Sumo.Material.Advanced) which will allow lights and shadows to affect it.
This will change the color of the material of the object. You can use a color constant writing Sumo.Color.[color string] or an hexadecimal value starting with 0x, for example 0xff0000 for red.
You can apply one of the default textures with Sumo.Texture.[name of the texture].
If your 3D object is set as interactive=true and you set this property, this value will become visible when you hover over it.
To move your object within the X axis, value in meters.
To move your object within the Y axis, value in meters.
To move your object within the Z axis, value in meters.
This is a method with 3 values (x, y ,z) in meters. It is commonly used to set the initial position of the object.
This is a method with 3 values (x, y ,z) in degrees. It is commonly used to set the initial rotation of the object.
To rotate your object on the X axis, value in degrees.
To rotate your object on the Y axis, value in degrees.
To rotate your object on the Z axis, value in degrees.
This is a method with 3 values (x, y ,z) where 0.5 is the 50% of the object size and 2 doubles its size. It is commonly used to set the initial scale of the object.
out = function()
This function is dispatched when your hover out from on top of the object. You need to set object.interactive=true to make it work. Inside this function is the code you want to run.
over = function ()
This function is dispatched when you hover on top of the object. You need to set object.interactive=true to make it work. Inside this function is the code you want to run.
update = function ()
This function is dispatched every frame render. It is useful to add complex behaviour on the object depending on other external variables. Inside this function is the code you want to run.
This Class creates a box 3D object. It inherits all of the 3D object methods listed above applies to this Class.
Box Constructor properties
You can set up to 5 properties when you define a new Box (width, height, depth, widthSegments, heightSegments). By default all are set as 1.
This Class creates a circle 3D object. All of the 3D object methods listed above apply to this Class.
Circle Constructor properties
You can set up to 2 properties when you define a new Circle (radius, segments). By default, radius is 1 and segments are 32.
This Class creates a cone 3D object. All of the 3D object methods listed above apply to this Class.
Cone Constructor properties
You can set up to 2 properties when you define a new Circle (radius, heigth). By default radius and heigth value is 1.
This Class creates a cylinder 3D object. All of the 3D object methods listed above apply to this Class.
Cylinder Constructor properties
You can set up to 4 properties when you define a new Cylinder (radius top, radius bottom, height, segments). By default radius is 0.5, height is 1 and segments are 32.
This Class creates an animated humanoid 3D object. All of the 3D object methods listed above apply to this Class.
You can set up how your dummy looks like. Using the constant Sumo.Skin.[name of the skin]. You have more than 20 skins to select.
It is a method to move your dummy forward by 1 meter. You can make moving patterns in a loop statement.
It is a method to make your dummy run forward by 1 meter. You can make running patterns in a loop statement.
With this command you can turn your dummy left.
With this command you can turn your dummy right.
If you want to move your dummy in a crouch position, you can add this command between other orders.
If your dummy is in crouch mode, you need to add this method to stand up again.
When you want to jump without moving the position of the dummy.
When you want your dummy to jumps and move forward 1 meter.
If you want to have your dummy wait in its current position for a short period of time.
If you want your dummy to start an animation to grab something from the floor.
If you want your dummy to start a push animation.
A boolean value, false by default, to dispatch a 'mission completed' animation (usually at the end of your animation routine).
This Class creates a Plane object. If you want to use a plane as a floor, you need to rotate it 90 degrees by giving it a method called .rotation(90,0,0).
Plane Constructor properties
You can set up to 4 properties when you define a new Plane (width, height, widthSegments, heightSegments). By default all are set as 1.
This Class creates a predefined 3D object that you can add to your scene. There are multiple assets precreated ready to be used.
Prefab Constructor properties
You need to use one of the valid values of the constant Sumo.Prefabs., now we have two categories, Food and House. Then, using the code hinting, you can select one of them.
List of prefabs available
This Class creates an sphere 3D object.
Box Constructor properties
You can set up to 3 properties when you define a new Sphere (radius, widthSegments, heightSegments). By default radius is set as 1 and widthSegments/heightSegment as 16.
This Class creates an sprite with a text. It inherits all of the 3D object methods listed above to this Class.
Text Constructor properties
You can set up only 1 property when you define a new Text. This property is a string with the desired text content.
Sumolip API - 2D UI
It is the basis of all 2D content you want to add to your project. It is a MUST to have it declared as 'var ui = new Sumo.UICore()' and to add to your sumo project as 'sumo.add(ui)'. With this we can have access to all their properties and methods that are explained below.
If you want to add any 2D element to the project, you need to make it child of the 'ui' variable using ui.add([2d object to add]).
It is a container and most of the upcoming UI Classes inherit from UIDiv. Remember, it is only a container. By default nothing renders on it. It is useful to group other visible UI elements as UIButton or UIText.
Set the position of your div, you can use the constant Sumo.UI.Position and their valid values (Bottom, BottomLeft, BottomRight, Center, Left, Right, Top, TopLeft, TopRight).
If you want to arrage your div childs on rows (Sumo.UI.Layout.Row) or columns (Sumo.UI.Layout.Column).
If you want to set an UI element to be visible or hidden as a boolean. This is commonly used combined with user interactions like press a button or to interact with a 3D object.
This is a kind of div that is used to overlay the scene to make it easier to add 2D elements readable over the 3D scene.
It is used to add a 2D button to your UI. It inherits all its methods and properties from UIDiv.
click = function ()
It is a function that is dispatched when the user clicks on it.
You can use the Sumo.UI.Size constant to modify its size.
If your button has text on it, you can set it as 'bold' (Sumo.UI.FontStyle.Bold) or 'italic' (Sumo.UI.FontStyle.Italic).
If you want to have any text on your button. (And alternative is to use some predefined icons, see below).
If you want to use an icon instead of text on your button, we have added some common icons used on UIs as constant.
If you want to use an image (usually a transparent .png file) on your UI.
click = function ()
As with UIButton, you can define a click function to be executed when the user clicks it.
This 'source' defines the URL where the image will be loaded from.
This property limits the size of the image, by default it is the width of the original loaded image.
This property limits the size of the image, by default it is the height of the original loaded image.
If you want to add any text on the 2D UI. It inherits all its methods and properties from UIDiv.
If you want to change the color of the text, you must use one of the Sumo.Color constants or an hexadecimal value preceded by 0x, for example 0xff0000 for red.
You can use the Sumo.UI.Size constant to modify its size.
If your button has a text on it, you can set as 'bold' (Sumo.UI.FontStyle.Bold) or 'italic' (Sumo.UI.FontStyle.Italic).
The text string you want to have in your 2D UI Text element.
It is a predefined gamepad to manage any 3D object on the scene. It has two parts, a joystick on the left side (visible by default) and a 3 button pad on the right side (hidden by default). You can use your mouse/touch events or with the keyboard keys predefined.
When you want to control a 3D object added to the scene.
If you want to increase/decrease the speed of the managed object. By default is 1.
You need to set as true to make them visible, because by default they are hidden. To make them work you need to define the click1 (J button), click2 (K button) and click3 (M button).
click1 = function()
The function executed when you press the first button (J key if you are on a desktop browser). If you are managing a Sumo.Dummy we made 3 methods to make it easy to animate them: dummy.clickAndJump, clickAndAction and clickAndCrouch.
click2 = function()
The function executed when you press the second button (K key if you are on a desktop browser). If you are managing a Sumo.Dummy we made 3 methods to make it easy to animate them: dummy.clickAndJump, clickAndAction and clickAndCrouch.
click3 = function()
The function executed when you press the third button (M key if you are on a desktop browser). If you are managing a Sumo.Dummy we made 3 methods to make it easy to animate them: dummy.clickAndJump, clickAndAction and clickAndCrouch.
One of the best ways to start learning is modifying some of the existing examples, if you go through to all of them you can see all the methods in action.
Learning game development
Making a game is not an easy task to start, but when you are comfortable with the API, we are sure you can start doing great interactive projects. Below you have some examples of simple games made with Sumocode to inspire you.
Memory game example
With less than 350 lines of code, you can play a 3D memory game with sounds. We use some JS basic concepts like Arrays, for and if statements, and we create our own methods and variables to be called from the Sumocode functions. Beyond that, the rest is to use your imagination and the Sumolib API.
Math Dummy game example
This game is a little more complex than the Memory game, but it has less than 500 lines of code. We use some JS basic concepts like Arrays (with multiple dimensions), switch, for and if statements, logic operators like && (AND) and || (OR) and we create our own methods and variables to be called from the Sumocode functions.