Getting Started
Note: For now, CGM Player only supports windows 10 and newer (and maybe some older versions of windows).
First, download the latest version of CGM and run "CGM Editor.exe" under the "CGM Editor folder".
To create an app, select the 'New App' button > click 'Edit' > hover over the first Node (blue box) and click 'Add' > select the newly created Node and begin typing!
Think of each Node (blue box) as it's own "Page" of a story. Pages can connect to other pages (child nodes; they are connected by a line when you click 'Add' on that node).
In-game, when a "page" ends it will continue on to the next "page" that is connected.
Formatting
Use the ENTER key (on windows) to create a new paragraph, and use the CTRL+SHIFT key (on windows) to create a new line.
Text is written as normal, however you may have a character send a message/chat using @character-id (see examples below). For stories, you may write @character-id to display text as that character's "thoughts".
Syntax | Description |
---|---|
#Comment | Comments are ignored by the game engine. To write a comment, start a new line with the "#" symbol. |
@any-character-id | Replaces automatically with the name of the character with the ID "any-character-id". Write @you to replace with the players name. Note that the ID "you" is reserved for the Player Character. |
@any-character-id (followed by a newline and some text) | Displays text from a character with "character-id". Appears differently when used in different app types. |
@@any-character-id (followed by a newline and some text) | Displays text from a character with "character-id" as if it were their "thoughts". Not available for all app types. |
[img:(path-to-file)] | Will show an image. |
~~Node Choice | Will trigger a node "choice" option for the player. This type of choice should be added as the first line of a node and is used as an option to lead to another node. Node Choices are useable with the Reply System (see *Reply [interactions] below). |
~Local Choice | Will trigger a local "choice" option for the player. This type of choice only applies to the current (local) node. These are currently not "nestable" and should always be followed with the line: ~end |
^Pop-up | Will trigger a pop-up. For example: ^This is a pop-up! |
Choices
When in-game, all choices will appear the same to the player. However, in the CGM Editor, there are 2 types of choices:
1. Local Choices: Written as "~Choice text here" (one "~" symbol). These are choices that are "local" only within the Node that they are written. These are currently not "nestable" and should always end with the line: ~end. For an example of this, see the "Varying Conversations" section below.
2. Node Choices: Written as "~~Choice text here" (two "~" symbols). These are choices that lead to a "node". They should be placed at the top of the node that you want to be reached when the choice is selected. Note that, anything written before the Node Choice line would be ignored as the engine will jump straight the Node Choice line - in other words, aim to put the Choice Node as the first line in the node (comments can be placed before it, as those lines are ignored by the engine anyway).
Varying Conversations
To vary conversations within a Node, use Local Choices. Below is an example:
~This is the first choice option
@kara
Kara is replying to the first option
As usual, with multiple lines allowed
@jess
Jessica can also reply
As usual, with multiple lines allowed
~Another multi choice can be added as well
@kara
Kara is replying to the first option
As usual, with multiple lines allowed
@jess
Jessica can also reply
As usual, with multiple lines allowed
~end
# You can add choices that all lead to the same outcome, like so:
~Choice
~Another choice
~Great, another choice
~end
Images
It's recommended to use at least 500x500 (pixels) images. There's no maximum really, but don't go too crazy. Images will automatically resize-to-fit where possible.
Store all images in the /images directory.
Variables
Variables may be used in your apps in the CGM Editor.
$variable represents a variable that should always appear as its updated value, compared with $$variable which only shows its value at the time it was displayed on screen. In other words, $variable will get updated everywhere in real-time as the value changes, and $$variable will not.
If Statements can use any logic that's possible in JavaScript. For example, you could write $variable === 'String' or $variable === 10. Or, you could write something like ($variable !== 'String' && $otherVariable > 10) && $anotherVariable <= $variable.
To write an if statement, you would do so like this:
*IF $day === "Monday"
@you
Great, this is a message that will only appear if $day = "Monday"
*ENDIF
Changing the result of an IF Statement:
Each line after an IF statement re-checks if the IF statement is true or false - because of this, you should aim to set variable values that will alter the IF statement's outcome right before the *ENDIF line. This behaviour was intended for this release, but future releases may address this if it becomes too problematic.
An example of this would be:
Incorrect - the popup won't show as $myVariable will be "true" when the engine checks the popup line.
*IF $myVariable === undefined
$myVariable = true
^The variable was undefined, so this popup is shown!
*ENDIF
Correct - the popup will show as $myVariable will only be true after the popup line was read by the engine.
*IF $myVariable === undefined
^The variable was undefined, so this popup is shown!
$myVariable = true
*ENDIF
If you encounter any issues with variables/if statements, please let me know.
Commands
Commands may be written into your apps in the CGM Editor to trigger different effects. For example, if you wanted to have the game display a "Restart" button, you could use the "*Restart" command. All commands start with the "*" symbol. The following commands are supported on the latest version of the CGM Editor. All commands are CASE-SENSITIVE and may not work if written incorrectly.
Command | Description |
---|---|
*IF [condition] | See "Variables" section for more details. Will check the condition and anything after the line and up until the next *ENDIF line will apply, if the condition is met (true). Should always be followed with the line: *ENDIF |
*Restart [message] | Will allow the player to restart/try again, from the start of the very beginning of a conversation chain. The message contents (option), will be displayed inside the button. |
*End | Will end the conversation chain. Nothing else will appear or trigger after this line. If any "~~Node Choices" are available, they will appear as choices to the player. |
*Choices | This functions exactly the same as the command: *End. It was added as an alternative way to say "Skip everything after this line and show the next available "~~Node Choices". |
*Continue | Coming Soon: This command is not available yet, but may come in a future version if requested. The idea is that this command will choose a random child node to continue on to from all child nodes. |
*Go To [node-id] | Will continue to the node matching the Node ID, on the current app. Note that you can only go to nodes that are on/under the same route (route ID). Routes are identified as the second-top nodes in CGM Editor, and each should be thought of as a separate section entirely - there is no way to jump between the two while on a specific route (without leaving the current route). |
*Reply [interactions] | Will trigger the "Reply System". The interactions value can be set to a value or range (e.g. "5" or "1-100"), where this is the number of interactions that are needed, at a minimum, to trigger the "Wait for reply (realistic)" response. The "Reply System" causes a pop-up to appear, with 3 options: a) Message first, b) Wait for reply (realistic) and c) Wait for reply (instant). For this to work correctly, child nodes must be added. Child nodes that act as a reply from another character start with @replying-character and child nodes that act as a Node Choice (from the player character) start with ~~Node Choice. |
*Open [app-id] [route-id] | The app with the matching ID, will be opened. If a route ID is specified, that route will be opened as well, otherwise it will go to the "Default" route (the main screen of the app). |
*Lock App [app-id] [message] | The app with the matching ID, will be locked. The message will be displayed in a pop-up if the app is attempted to be accessed. |
*Unlock App [app-id] | The app with the matching ID, will be unlocked. |
*Hide App [app-id] | The app with the matching ID, will be hidden. |
*Show App [app-id] | The app with the matching ID, will be shown. |
*Lock Apps [message] | Will lock all apps. The message will be displayed in a pop-up if the apps are attempted to be accessed. |
*Lock Other Apps [message] | Will lock all apps (except the current one). The message will be displayed in a pop-up if the apps are attempted to be accessed. |
*Unlock Apps | Will unlock all apps. |
*Unlock Other Apps | Will unlock all apps (except the current one). |
*Hide Apps | Will hide all apps. |
*Hide Other Apps | Will hide all other apps (except the current one). |
*Show Apps | Will show all apps. |
*Show Other Apps | Will show all other apps (except the current one). |
*Unlock Node [node-id] [app-id] | The node with node ID, matching the app with the app ID, will be unlocked. If no app ID is specified, it will assume to use the current app (if any). |
*Lock Node [node-id] [app-id] [message] | The node with node ID, matching the app with the app ID, will be unlocked. If no app ID is specified, it will assume to use the current app (if any). The message will be displayed in a pop-up if the app is attempted to be accessed. |
*Hide Node [node-id] [app-id] | The node with node ID, matching the app with the app ID, will be hidden. If no app ID is specified, it will assume to use the current app (if any). |
*Show Node [node-id] [app-id] | The node with node ID, matching the app with the app ID, will be shown. If no app ID is specified, it will assume to use the current app (if any). |
*Add Character [character-id] [app-id] | By default, when a game loads, apps have characters added to them if they have content (for example, in Messages, if a character has a conversation available, that character will be listed in Messages initially), however all other characters are not added. This command adds the character with the matching character ID, for the specified app matching the app ID. If no app ID is specified, it will assume to use the current app (if any). |
*Remove Character [character-id] [app-id] | By default, when a game loads, apps have characters added to them if they have content (for example, in Messages, if a character has a conversation available, that character will be listed in Messages initially), however all other characters are not added. This command removes the character with the matching character ID, for the specified app matching the app ID. If no app ID is specified, it will assume to use the current app (if any). |
*Award [award-id] | Awards the player with an award, viewable in the Awards app. The Award ID should match the award that is created in CGM Editor. |
*Ending [name] | Awards the player with an award automatically generated from the value of [name]. Note that if multiple of these commands are used with identical [name] values, these will be treated as the "same" ending and no additional award will be awarded to the player in-game. The [name] value is treated as case-insensitive, meaning "The Best Ending Ever" and "the best ending ever" are treated as the same ending. |
*Power [status] | Change the phone's power status, by setting [status] to either On or Off. |
Reserved Characters
If you'd like to use any of the above without actually treating them as variables, add an ! symbol before it.
For example:
!@ will be treated as @
!$ = $
!# = #
!^ = ^
!~ = ~
!* = *
If you write $100, the engine will convert $100 to the value of a variable called $100 (even if it doesn't exist).
To use special characters, e.g. you want to write $100 (which normally gets treated as variable called $100), you would write !$100 instead. The same logic applies for !$$10, !@character and !@character.
Testing
Install your game into CGM Player (see the "How To Install Games.txt" file under the "CGM Player" folder). Next, run "CGM Player.html" and you should see your game along with it's logo file (if one was added to the Logo Path specified in CGM Editor). We recommend that you save your game to one directory, update it as needed, and then copy/paste the game's files into CGM Player as needed - in otherwords, don't just directly edit the copy inside CGM Player (as you may forget to update the original copy). It is also recommended that you keep multiple back-up copies of your game periodically.
Guide
- 📚About [+]
- 📚Creating Apps [-]
- 📘Getting Started
- 📘Formatting
- 📘Choices
- 📘Varying Conversations
- 📘Images
- 📘Variables
- 📘Commands
- 📘Reserved Characters
- 📘Testing