People Online: 6

Your First Project

Welcome to Vylocity. Vylocity is a game creation service that lets you easily create and play web games from anywhere and on any device. Vylocity projects are created using the Vylocity IDE (integrated development environment) which consists of multiple tools to help you create a game such as the code editor, the icon editor, the map editor, the interface editor, the macro editor, and the sound editor. The language used is known as VyScript, which is the most important part of the creation process and these tutorials will mostly cover how to use VyScript.

This tutorial will cover the very basics. For more advanced tutorials, you may want to skip ahead. But you might want to go to the bottom of the previous tutorial you start from and reproduce the source created, because we will be changing and adding onto it as we move along the tutorials.

To start, you will need to start a new project. To do this, click on the Create button at the top of the Vylocity website (might want to right-click and open in a new tab). This should bring you to a window asking for information about the game you are creating. Usually you can name things anything you want, but for the sake of these tutorials, try to name things as they are named here. So let's enter in FirstProject for the Page Path and First Project for the Game Name. You can leave the other two boxes blank. Once that is done, hit the Start Creation button at the bottom and you should be taken to a new page.

The page that you should now see is the page that people will be able to visit once your game is ready and you have published it. We will go over all of that in a later tutorial. But for now, click on the Edit Game button found on the page. This will take you into the IDE for your game. This is where all of the tools are found and where you will work on the game.

You can press F1 at any time to bring up the documentation which will allow you to look up certain parts of VyScript, easily see the tutorials right in the IDE, or add libraries to your project. We will discuss libraries in a future tutorial.

Now it is time to create our first file. Because code is the most important part of a project, we will create a code file. In the top left is a File button. Clicking it will bring down a menu, click on the New option. This should bring up a window that lets you select what file you want to create. In the File Name text box enter main and then click on the Code button. This should create a new file named main and open a code editor tab with a single line with no code in it. This is where we will type all of our code.

We will keep things simple and just change the size of our game. Enter the following code into your main code file.

World gameWidth = 1024 gameHeight = 640

So how exactly does this work? World is an object that contains general information about our game. It has many default variables and many variables that we can change to our liking. In this case, we are making the game window have a width of 1024 and a height of 640.

VyScript is tab sensitive, so be sure to put the tabs where they belong. In this case, each line under World should have a single tab before it. This tells the builder that these lines belong to the World object.

So now that we have some code, we need to build our project and run it to see the results. Up top on the file menu is a button called Project. Click on it and a new menu should appear. In this menu, click on the Build option. Once the build is complete, go back and click on the Run option. A new window should appear in the middle of the screen, if it does not, you may need to allow popups in your browser for the Vylocity site.

The window that appears should be a black window that is 1024 pixels wide and 640 pixels high. This is where our game will be displayed once we get going. Close the window. Try a few different values for the gameWidth and gameHeight if you want, but return the values to 1024 width and 640 height so that we are on the same page.

Now, we need something to look at. We will need to create some icons. Go up to File->New, enter icons in the text box and select the Icon Atlas button. A new icon file should be created and the icon editor should appear. An icon atlas is a group of icons, usually icons that relate to one another. To create a new icon inside of the icon atlas, you can go up to Edit in the file menu and select New Icon or you can right-click on the icon list off to the left of the screen and select New Icon. Once clicking that you will get a new window asking for the name of the icon and the size it will be. Enter player for the name, leave the icon size as it is, and then click on the Create button. A new icon will be created and blank box should appear in the editor. We wont focus much on the icon editor. Off to the right of the page is a box titled Color. Use the sliders there to pick a color other than black. Leave the fourth slider A at 255. Then randomly draw on the icon canvas. Nothing too fancy needed, but mess around the icon editor and paint anything you want. Create another icon, name it tile, fill it with a color, then return to your main code file.

Now, we want to create some tiles so that when we create a map, we have something to put down. In the main code file, enter the following code at the bottom.

Tile atlasName = 'icons' iconName = 'tile'

What this code does is, is it sets the default icon atlas and icon name of all tiles in the game to 'icons' and 'tile' respectively. We'll go over how to add new tile types, among other object types in a following tutorial. But you'll notice these values have single quotes around them. This means that the variable is a string. A string holds text information. When defining a string, you may use single quote or double quotes, but if you start the string with one of them, you must end the string with the same one. In this case, it is holding the names of our icon atlas and icon.

Now that our tiles have a visual representation, we will be able to see them on the screen. But we need a map in order to have something to move around on.

Go up to File->New and create a Map file named map. After doing so, the map editor should appear with a window in the middle asking what size the map will be. Leave it 25x by 25y for now and hit the Set Size button.

Off to the left you will see a list of objects. These are the default types. In our code above we changed the icon for the default Tile, but in order for the map editor to know about it, we need to build our project. So head up to Project->Build and our map should change so that our new icon we made for tiles fills it.

Now that we have a map, we need to give our player an icon and a default location on the map. Add the following code to the end of your main code file.

Mob atlasName = 'icons' iconName = 'player' xCoord = 5 yCoord = 5

Unless we specify otherwise, all player mobs will be of the type Mob by default, so by giving all mobs this icon and location, our player will also have this icon and location. You should already know what atlasName and iconName are for, but now we have two more variables. These variables are the coordinates on the map that all new mobs will have when they are created. The variable xCoord is the number of tiles from the left on the map and the variable yCoord is the number of tiles from the top on the map.

Build and run the project. You should now see your player icon at the 5,5 location on your map, which should be represented by a bunch of your tile icons.

Now we want to be able to move around the map. To do this, we will use the built-in functions. When you create your first macro file, the default movement macros will be added to it. So, go up to File->New and create a macro file named macros. Build and run and you should now be able to use the arrow keys or the WASD keys to move around the map. Don't worry about what is in the macro file for now, it is just default macros to enable movement with the mentioned keys. A future tutorial will go over macros.

Before we move on to learning about object types, let's organize the files we have so far and learn about how to use comments. It's always good to be organized when working on projects so you know where things are and to have comments to know what code does what.

If you have not figured it out already, you can open the file list for your project by clicking on the button with three lines on it, located under the File link on the file menu. Once this list is shown, you can right-click on an empty are and select New Folder. Enter code for the name and click on Done. Now in the file list, drag your code file named main and drop it onto the folder. Create new folders called icons, macros, and maps and put the respective file types in their folders. For now on, we will be putting all of our files in their proper folders to keep them organized. For larger projects, it's good to have folders inside of folders, but for now, single folders will do.

To make comments in the code, simply put two forward slashes and all code after will be commented out. Commented out code will be ignored by the builder. So you can comment out code that is not working to figure out why it isn't working, or you can explain to others or yourself what certain code does, among other things. Here is an example of a comment in some code. Do not include this code in your project, just observe how it works.

Mob //this is a comment and the builder will ignore me atlasName = 'icons' iconName = 'player' xCoord = 5 //this is some code yCoord = 5

Finally, if you want to comment a larger section of your code, you can use /* and */ where the text to be commented is located between those sets of symbols. For example.

Mob /* this is a comment and the builder will ignore me we are commenting out the lower two lines atlasName = 'icons' iconName = 'player' we will end our comment here */ xCoord = 5 yCoord = 5

We now have the basics of a project started and have learned some basics. Next tutorial we will learn about variables and event functions.

If you followed everything in this tutorial, the source of your project should look something like this.