Differences

This shows you the differences between two versions of the page.

--- create_custom_game_tutorial [2017/10/26 11:58] – justin
+++ create_custom_game_tutorial [2017/10/26 14:14] (current) – justin
@@ Line 1: / Line 1: @@
-======Creating a Custom Game from Scratch======
+======Creating Your Own Game from Scratch======
 ----
 The purpose of this guide is to walk you through the process of creating a simple game from scratch using your own custom-made resources. While some detail will be provided for each step, it is recommended that you have a basic understanding of the editors. If you are unsure of the controls or how to complete a certain action, refer to the individual editor guides that are available from the sidebar. As new features are added to the software, I intend to update this guide accordingly to cover those new features. If there is any particular functionality that you think would be useful to include, please let me know!
-If at any point you get stuck or would just like to grab the resources created for this guide, the game project can be downloaded in its entirety here: example_desert_game.zip
+If at any point you get stuck or would just like to grab the resources created for this guide, the game project can be downloaded in its entirety here: [[http://www.rpginabox.com/wp-content/uploads/example_desert_game.zip|example_desert_game.zip]]
 =====Setting Up the Game Project=====
@@ Line 27: / Line 27: @@
 {{:wiki:new_tile.png?nolink|}}
-The [[Voxel Editor]] will open and you can begin editing your [[til]]e. The default [[tile]] size is 16x16x24, but for the sake of simplicity let's make it smaller. Click and drag the "Grid Width" slider down to 8. You will notice that the "Grid Width" and "Grid Depth" sliders are locked together. This is the case for [[tile|tiles]] since they must always be square. Also adjust the "Grid Height" slider to 8. Now using various shades of light brown, place some [[voxel|voxels]] to create a 16x16x1 [[tile]]. For a flat [[tile]], the top view will probably work best. For more details on the usage of the [[Voxel Editor]], check out the [[Voxel Editor]] page.
+The [[Voxel Editor]] will open and you can begin editing your [[tile]]. The default [[tile]] size is 16x16x24, but for the sake of simplicity let's make it smaller. Click and drag the "Grid Width" slider down to 8. You will notice that the "Grid Width" and "Grid Depth" sliders are locked together. This is the case for [[tile|tiles]] since they must always be square. Also adjust the "Grid Height" slider to 8. Now using various shades of light brown, place some [[voxel|voxels]] to create a 16x16x1 [[tile]]. For a flat [[tile]], the top view will probably work best. For more details on the usage of the [[Voxel Editor]], check out the [[Voxel Editor]] page.
 {{:wiki:sand_tile.png?nolink|}}
@@ Line 57: / Line 57: @@
 {{:wiki:passable_property_off.png?nolink|}}
-Using the Save As button as before, create one or two more copies of the cactus and modify them slightly so you'll have a few variations to select from. As shown below, I "trimmed" my original cactus to create some new ones with fewer branches. As you can see, I also created a "rock" object. Since it's only a small rock, I ensured that its Walkable property was enabled since it should not impede the player's movement.
+Using the "Save As" button ({{:wiki:disk_multiple.png?nolink|}}) as before, create one or two more copies of the cactus and modify them slightly so you'll have a few variations to select from. As shown below, I "trimmed" my original cactus to create some new ones with fewer branches. As you can see, I also created a "rock" "object". Since it's only a small rock, I ensured that its "Passable" property in the [[Model Properties]] panel was enabled since it should not impede the player's movement.
 {{:wiki:cactus_object_02.png?nolink|}} {{:wiki:cactus_object_03.png?nolink|}} {{:wiki:rock_object.png?nolink|}}
-You should have a nice selection of tiles and objects to build with now, so we can move on to the map creation!
+You should have a nice selection of [[tile|tiles]] and [[object|objects]] to build with now, so we can move on to the [[map]] creation!
 ====Starting Map====
-Click the New Resource button on the Game Explorer toolbar and enter "desert" for the name. You will also want to set the Width of Tiles to be 8 voxels so the tiles we created earlier will correctly match up with the grid. Click OK once the name and width have been set.
+Click the "New Resource" button ({{:wiki:new_resource.png?nolink|}}) on the [[Game Explorer]] toolbar and enter "desert" for the name. You will also want to set the "Width of Tiles" to be 8 [[voxel|voxels]] so the [[tile|tiles]] we created earlier will correctly match up with the grid. Click OK once the name and width have been set.
 {{:wiki:new_map.png?nolink|}}
-Once the Map Editor has opened with your new map, click on the sand tile in the Resource Panel.
+Once the [[Map Editor]] has opened with your new [[map]], click on the sand [[tile]] in the resource panel.
 {{:wiki:select_sand_tile.png?nolink|}}
-Place some sand tiles to form a small square as the initial base for the map. You can toggle the Randomize Rotation button on the Map Editor toolbar when placing tiles or objects to add variety to the placement, or right-click to rotate the pending resource to a specific angle before placing. Then, place some of the road tiles down the width of the map and scatter several of the "sand with rock" tiles around as desired. For more details on the usage of the Map Editor, check out the Map Editor page.
+Place some sand [[tile|tiles]] to form a small square as the initial base for the [[map]]. You can toggle the "Randomize Rotation" button ({{:wiki:arrow_switch.png?nolink|}}) on the [[Map Editor]] toolbar when placing [[tile|tiles]] or [[object|objects]] to add variety to the placement, or right-click to rotate the pending resource to a specific angle before placing. Then, place some of the road [[tile|tiles]] down the width of the map and scatter several of the "sand with rock" [[tile|tiles]] around as desired. For more details on the usage of the [[Map Editor]], check out the [[Map Editor]] page.
 {{:wiki:desert_map_place_tiles.png?nolink|}}
-Next, open the Objects tab on the Resource Panel (second tab) and select a cactus. When placing a cactus onto a tile (and assuming that Navigation/Interaction Paths are enabled on the toolbar) you will notice that the green navigation lines will update to indicate that the player can no longer walk through this tile since we defined the cactus as not being walkable.
+Next, open the "Objects" tab on the resource panel (second tab) and select a cactus. When placing a cactus onto a [[tile]] (and assuming that "Navigation Paths" are enabled on the toolbar) you will notice that the green [[navigation_and_interaction|navigation lines]] will update to indicate that the player can no longer walk through this [[tile]] since we defined the cactus as not being passable.
 {{:wiki:cactus_not_passable.png?nolink|}}
-Add a bunch of cactuses and a few rocks around the sandy parts of the map, then use the Save button on the Map Editor toolbar to save the map. To achieve the appearance of the desert below, I also went into the Properties panel and made a few lighting adjustments. I chose a dark grey for the Ambient Light color and a bright yellow for the Directional Light color. Shadows were also enabled under the Directional Light section. Don't be afraid to experiment! The lighting can make a lot of difference in the visual style of your map.
+Add a bunch of cactuses and a few rocks around the sandy parts of the [[map]], then use the "Save" button ({{:wiki:disk.png?nolink|}}) on the [[Map Editor]] toolbar to save the [[map]]. To achieve the appearance of the desert below, I also went into the [[Map Properties]] panel and made a few lighting adjustments. I chose a dark grey for the [[ambient light]] color and a bright yellow for the [[directional light]] color. Shadows were also enabled under the [[directional light]] section. Don't be afraid to experiment! The lighting can make a lot of difference in the visual style of your [[map]].
 {{:wiki:desert_map.png?nolink|}}
 ====Player Character====
-In addition to the map, you'll also need a character model to represent the player. Click the New Resource button on the Game Explorer toolbar again and select "Character" as the type. For our player character, let's create a person riding a four-wheeler/quad bike to go along with the desert theme, so enter a descriptive name such as "quad_bike" then click OK.
+In addition to the [[map]], you'll also need a [[character]] model to represent the player. Click the "New Resource" button ({{:wiki:new_resource.png?nolink|}}) on the [[Game Explorer]] toolbar again and select "Character" as the type. For our [[player character]], let's create a person riding a four-wheeler/quad bike to go along with the desert theme, so enter a descriptive name such as "quad_bike" then click OK.
 {{:wiki:new_character.png?nolink|}}
@@ Line 95: / Line 95: @@
 {{:wiki:quad_bike_front.png?nolink|}} {{:wiki:quad_bike_back.png?nolink|}}
-In order to give the appearance of motion when the player is driving around, let's create a simple animation for the model. Click the Duplicate Current Frame button on the animation toolbar (located below the 3D view of the Voxel Editor) four times to create four new frames identical to the original frame. As shown in the four images below, I changed one of the voxels in each tire to a lighter color in frames 2 through 5 so the tires will appear to spin. I also made the red brake light at the back of the bike a brighter red in frame 1 so the brake light will appear to come on when the player is stopped.
+In order to give the appearance of motion when the player is driving around, let's create a simple [[animation]] for the model. Click the "Duplicate Current Frame" button ({{:wiki:film_duplicate.png?nolink|}}) on the [[animation]] toolbar (located below the 3D view of the [[Voxel Editor]]) four times to create four new frames identical to the original frame. As shown in the four images below, I changed one of the [[voxel|voxels]] in each tire to a lighter color in frames 2 through 5 so the tires will appear to spin. I also made the red brake light at the back of the bike a brighter red in frame 1 so the brake light will appear to come on when the player is stopped.
 {{:wiki:duplicate_frame.png?nolink|}}
@@ Line 103: / Line 103: @@
 {{:wiki:quad_bike_anim_03.png?nolink|}} {{:wiki:quad_bike_anim_04.png?nolink|}}
-Now let's define a "walk" animation for the player character. Click the Add Animation button on the animation toolbar.
+Now let's define a "walk" [[animation]] for the [[player character]]. Click the "Add Animation" button ({{:wiki:add.png?nolink|}}) on the [[animation]] toolbar.
 {{:wiki:add_animation_button.png?nolink|}}
-In the Add Animation dialog that is display, enter the values as shown below and click OK. It is important that the animation is named "walk" exactly. When playing, the game will look for an animation with this name and trigger it whenever the character is moving.
+In the "Add Animation" dialog that is displayed, enter the values as shown below and click OK. It is important that the [[animation]] is named "walk" exactly (in all lowercase). When playing, the game will look for an [[animation]] with this name and trigger it whenever the [[character]] is moving. The project files linked at the top of this tutorial also includes an "idle" [[animation]] for the bike and a slightly improved "walk" animation. The "idle" [[animation]] is another type of [[predefined_animation_names|predefined animation]] which automatically plays whenever the [[character]] is not moving.
 {{:wiki:add_walk_anim.png?nolink|}}
-Whenever an animation is added to a voxel model, the animation will appear in the Properties panel at the left. From there, you can modify the Start Frame, End Frame, Type, and Speed of the animation after it has been defined.
+Whenever an [[animation]] is added to a [[voxel]] model, the [[animation]] will appear in the [[Model Properties]] panel at the left. From there, you can modify the "Start Frame", "End Frame", "Type", and "Speed" of the [[animation]] after it has been defined.
 {{:wiki:animation_properties.png?nolink|}}
@@ Line 118: / Line 118: @@
 ====Startup Script====
-We need to create one more resource before we can configure and export the game: a startup script. The startup script is important because it tells the game what to do when the user first launches your game. Click the New Resource button on the Game Explorer toolbar and select "Script" as the resource type. Enter "startup" for the name (this can be whatever you want, but it's good to use something descriptive), then click OK.
+We need to create one more resource before we can configure and export the game: a [[startup script]]. The [[startup script]] is important because it tells the game what to do when the player first launches your game. Click the "New Resource" button ({{:wiki:new_resource.png?nolink|}}) on the [[Game Explorer]] toolbar and select "Script" as the resource type. Enter "startup" for the name (this can be whatever you want, but it's good to use something descriptive), then click OK.
 {{:wiki:new_script.png?nolink|}}
-The Script Editor will open your new script, which initially will only contain a Start node. In this guide, we will simply add a Load Map node to the script. This function will, as its name implies, load a map. This is all we will need to get the game started. To do this, double-click on Load Map in the Palette list to add a node for that function into your script. It will then appear in the visual Script Graph. Ensure that the "desert" map is selected in the Map Name dropdown. With this function, you can also specify the starting tile coordinate that the player will start on as well as the direction the player will be initially facing. You can leave these values as is (unless you happened to have placed a cactus on coordinate (0,0,0), in which case you'll want to specify a different tile coordinate).
+The [[Script Editor]] will open your new [[script]], which initially will only contain a "Start" node. In this guide, we will simply add a [[Load Map]] node to the [[script]]. This function will, as its name implies, load a [[map]]. This is all we will need to get the game started. To do this, double-click on [[Load Map]] in the list to add a node for that function into your [[script]]. It will then appear in the visual script graph. Ensure that the "desert" [[map]] is selected in the "Map Name" dropdown. With this function, you can also specify the starting [[tile]] [[coordinate]] that the player will start on as well as the direction the player will be initially facing. You can leave these values as is (unless you happened to have placed a cactus on [[coordinate]] (0,0,0), in which case you'll want to specify a different [[tile]] [[coordinate]]).
 {{:wiki:startup_script_load_map_01.png?nolink|}}
-Now you'll need to connect the Load Map node to the Start node in order for the function to be executed when the script is triggered. Click and hold on the cyan-colored output connector on the right side of the Start node, then drag the mouse down to the similar input connect on the left side of the Load Map node. You should now see a cyan line connecting the two nodes together. Go ahead and save the script.
+Now you'll need to connect the [[Load Map]] node to the "Start" node in order for the function to be executed when the [[script]] is triggered. Click and hold on the cyan-colored output connector on the right side of the "Start" node, then drag the mouse down to the similar input connect on the left side of the [[Load Map]] node. You should now see a cyan line connecting the two nodes together. Go ahead and save the [[script]].
 {{:wiki:startup_script_load_map_02.png?nolink|}}
-Below the Script Graph, you will notice there is an area titled "Source Code". This is primarily for informational purposes, but can be helpful if you are interesting in learning the custom scripting language that is used by RPG in a Box. The source code is updated in real-time as you edit the visual Script Graph. For more details on the usage of the Script Editor, check out the Script Editor page.
+Below the visual script graph, you will notice there is an area titled "Source Code". This is primarily for informational purposes, but can be helpful if you are interesting in learning the custom [[script_syntax|scripting language]] that is used by RPG in a Box. The source code is updated in real-time as you edit the visual script graph. For more details on the usage of the [[Script Editor]], check out the [[Script Editor]] page.
 {{:wiki:startup_script_source.png?nolink|}}
 =====Configuring the Game=====
-We've created all of the necessary resources (tiles, objects, map, player character, and startup script), so now we are ready to configure a few settings for the game. In the Game Explorer, double-click the Game Configuration item that is listed directly underneath your game's title.
+We've created all of the necessary resources ([[tile|tiles]], [[object|objects]], [[map]], [[player character]], and [[startup script]]), so now we are ready to configure a few settings for the game. In the [[Game Explorer]], double-click the [[Game Configuration]] item that is listed directly underneath your game's title.
 {{:wiki:game_config_item.png?nolink|}}
-Once the Game Configuration dialog appears, select "startup" for the Startup Script and "quad_bike" for the Player Character. As mentioned before, when the game first launches it will trigger the startup script defined here. The player character that is defined here will be used for the default player model (unless a Player Override is set for the map). Click the Close button to save the settings.
+Once the [[Game Configuration]] dialog appears, select "startup" for the "Startup Script" setting and "quad_bike" for the "Player Character" setting. As mentioned before, when the game first launches it will trigger the [[startup script]] defined here. The [[player character]] that is defined here will be used for the default player model (unless a "Player Override" is set for the [[map]] from the [[Map Properties]] panel). Click the "Close" button to save the settings.
 {{:wiki:game_config_custom.png?nolink|}}
 =====Exporting and Playing=====
-Now that we've configured the game settings, let's export the game to try it out. On the main toolbar at the top of the application, click on the Export Game button. Once the Export Game dialog opens, click the Browse button and create a new folder to use as the destination. Once the export destination path is set, select the appropriate target platform from the dropdown. In this case, you would want to select the platform you are currently running on. If you have previously exported your game to this location for same platform, you can check the Export data only checkbox to have the application only copy your resource package and skip the executable file. Once ready, click the OK button to proceed with the export.
+Now that we've configured the game settings, let's export the game to try it out. On the main toolbar at the top of the application, click on the "Export Game" button ({{:wiki:box.png?nolink|}}). Once the "Export Game" dialog opens, click the "Browse" button and create a new folder to use as the destination. Once the export destination path is set, select the appropriate target platform from the dropdown. In this case, you would want to select the platform you are currently running on. If you have previously exported your game to this location for same platform, you can check the "Export data only" checkbox to have the application only copy your resource package and skip the executable file. Once ready, click the OK button to proceed with the export.
 {{:wiki:export_example_game.png?nolink|}}
-Now that your game has been exported, use your system's file explorer to navigate to the destination folder that you selected in the Export Game dialog and double-click the "game_launcher" executable file to launch the game.
+Now that your game has been exported, use your system's file explorer to navigate to the destination folder that you selected in the "Export Game" dialog and double-click the "game_launcher" executable file to launch the game.
 {{:wiki:play_desert_game.gif?nolink|}}

RPG in a BoxOfficial Documentation

User Tools

Site Tools

Differences

Page Tools

RPG in a Box
Official Documentation