DEV Community

Mekhi Miller
Mekhi Miller

Posted on

Confirm Reclass: JavaScript Developer --> GDScript Developer

TABLE OF CONTENTS

Introduction

So you want to be a game developer, huh? Good news! You’ll be pleased to know that many of the skills that you’ve acquired from JavaScript development will carry over. I say that from experience; I have flipped my JavaScript knowledge to learn GDScript, the recommended language of the Godot game engine. If you want to make the same transition, allow me to show you where the languages will be the same and where they will be different.

Soooooo why GDScript?

I think it’s better to ask first why Godot? Godot is an open-source game engine that is completely free and gives you control over your projects under the MIT license. It has been cited as very beginner-friendly while also being a tool to create complex games. It is well-built for 2D game development (with features like a powerful tilemap editor) and has a growing feature set that indie 3D game developers will love. I wouldn’t say Godot is the game engine of choice in the industry, but it’s on the rise! It has a large, dedicated, and growing community that can help you learn the engine and complete the game you want to create.

GDScript is a scripting language built for Godot specifically, so it is tightly integrated with the engine. While using GDScript in Godot, your code and visual editors will interact with each other efficiently. Though other game engines do not support GDScript, if you want to leverage the powerful features of the Godot game engine, GDScript is the language to learn.

The JavaScript to GDScript conversion

I said before that what you know from JavaScript can be flipped into GDScript, so I think it’s about time I show you how! Inspired by languages like Python, Squirrel, and Lua, GDScript’s syntax is designed to be easy to learn. All of its keywords are semantic and its structure is very English-like, using indentation to make all of the code you write easier to follow. Though most JavaScript and GDScript syntax will not match one-to-one, it won’t be hard to adapt what you know to write in GDScript.

Variables

Let’s start with variables. How do you declare one? Compare the GDScript and JavaScript code below:

# GDScript
var variable = 'This can change!'
const constant = "This can't."
Enter fullscreen mode Exit fullscreen mode
// JavaScript
let variable = 'This can change too!';
const constant = "Yeah, this can't change.";
var variable2 = 'Wait a minute...';
Enter fullscreen mode Exit fullscreen mode

As you might’ve guessed by the variable names, GDScript’s var is just like JavaScript’s let; they are keywords that declare variables that can change later on. And GDScript’s const is just like… well JavaScript’s const; these keywords declare constants that cannot be changed later on in your code.

The odd one out is JavaScript’s var... the main way to declare a variable in JavaScript pre-ES6. If you are someone who is used to let and const already, this keyword overlap shouldn’t confuse you. However, if you frequently use var in JavaScript and make use of “hoisting”, beware; GDScript cannot hoist variables. Every variable and constant you use in GDScript must be declared beforehand in the correct scope.

Data types

Now let’s get into the Data Types of GDScript!

# Good 'ol null
null

# bool (Boolean)
true
# String
"Just like JS!"
# int (Integers)
1
# float (Decimals)
3.14
# Vector2 (uhhhhh)
Vector2(0,0)
Enter fullscreen mode Exit fullscreen mode

A lot of things should be familiar here. null represents the value of nothing, booleans can either be true or false, and GDScript Strings are just like JavaScript strings. Numerical values will be the first place that you find differences. Unlike JavaScript, GDScript distinguishes between integers and floating-point numbers. This being the case, you will get unintended results if you’re not careful. When using any math expressions, make sure that the operands are the same type as the desired outcome (so 5.0 / 2.0 = 2.5, but 5 / 2 = 2).

Next, there is the Vector2 data type for 2D games in Godot. Vector2s are used to represent 2D coordinates, with the left value being the x value and the right being the y value. Since movement around the plane is important to nearly every 2D game, you will be using Vector data types often.

GDScript also offers the ability to add type hints to your variables. Adding type hints will make it so your variables are expected to maintain their data type as the value changes. This benefits you, the compiler, and any other developers working on your code by improving readability and facilitating earlier error detection. Since GDScript is still a dynamically typed language, type hints are entirely optional. However, they are great to implement into your code anyway to get some of the benefits of a strictly typed language. You can add a type hint explicitly or allow the engine to infer the type based on the initial value. Here’s what it would look like:

# explicit
var my_number: int = 10 
var position: Vector2 = Vector2(0,0)

# implicit
Var my_string := "Hello"
var my_float := 5.0
Enter fullscreen mode Exit fullscreen mode

Hashmaps and Arrays

GDScript Arrays maintain most of the functionality of JavaScript Arrays. There may be a couple of extra GDScript methods for game development, but most of what you want an Array for will be carried over. GDScript allows you to strictly type your Arrays to improve performance and help you catch bugs in your script. Many of the Arrays you create will contain a single data type inside so, just like type hints, it will be good practice to strictly type your Arrays whenever you can.

You can initialize a typed array like so:

var nums: Array[int] = [1, 2, 3, 4]
var players: Array[String] = ["bigDOG", "xX_power_Xx", "JamieShmamie"]
Enter fullscreen mode Exit fullscreen mode

Dictionaries are to GDScript as Objects are to JavaScript.

Isaac Newton, Vincent Van Gough, most famously, me

Buuuuut Dictionaries have fewer restrictions on their key types. An Object’s keys must be a string, but Dictionaries can have any of the previously mentioned data types as a key! Dictionaries also maintain insertion order, unlike Objects, where it may not be guaranteed depending on the engine.

Here are some examples of how you can use dictionaries in GDScript:

var inventory = {
    "health_potion": 5,
    "gold_coin": 100,
    "sword": 1
}

# Accessing values
var potion_count = inventory["health_potion"] 
print("Potion Count:", potion_count) 

# Adding a new item
inventory["shield"] = 1

var dialogue_options = {
    1: "Talk to the guard.",
    2: "Enter the tavern.",
    3: "Leave the town."
}

# Displaying options
for option_id in dialogue_options:
    print(option_id, ":", dialogue_options[option_id])
Enter fullscreen mode Exit fullscreen mode

Functions, code blocks, If statements, and Loops

When comparing JavaScript to GDScript, the biggest difference is in how code blocks are written. As I said before, GDScript focuses much more on indentation. Where it was a style choice for readability in JavaScript, indentation is required to denote a code block in GDScript. Curly braces will not do the trick.

When declaring functions in GDScript, you must use the func keyword. You can also strictly type your functions to restrict the parameter and return value data types. If a function is not intended to return anything, you can mark the return type as void. Here’s what strictly typed functions look like in GDScript:

func my_function (a: int, b: String) -> void:
    print(This function returns nothing)

func square_float (num: float) -> float:
    return num * num
Enter fullscreen mode Exit fullscreen mode

Though the three-expression JavaScript for loop is missing, GDScript’s for loop is very similar to JavaScript’s for…of and for…in loops. For if/else statements, the JavaScript else if keyword is replaced by elif, and parentheses are not required to contain if and elif logic expressions.

Now put it all together! Here’s what the FizzBuzz algorithm would look like in GDScript:

func fizz_buzz(num: int) -> void:
    for x in range(1, num + 1):
        if x % 3 == 0 and x % 5 == 0:
            print("FizzBuzz")
        elif x % 3 == 0:
            print("Fizz")
        elif x % 5 == 0:
            print("Buzz")
        else:
            print(x)
Enter fullscreen mode Exit fullscreen mode

Let’s wrap it up

Transitioning from JavaScript to GDScript can be a smooth process if you leverage your existing knowledge of programming fundamentals. Embracing GDScript's unique syntax (with its reliance on indentation, optional strict typing, and Vector data types) will elevate your coding to the next level. Add in the best practices you picked up from writing JavaScript code and you will be creating engaging games in no time! Remember to utilize the extensive documentation and the vibrant Godot community for support and inspiration as you embark on your game development journey.

Now then… go forward, and master the way of GDScript!

Resources

  • Learn GDScript From Zero - helpful tutorial to practice the syntax and further explain the intricacies of GDScript
  • GDQuest - a Youtube Channel centered on teaching developers about creating games in Godot
  • Godot Docs - the end-all-be-all of any questions you have about GDScript and Godot

Top comments (0)