Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Game Development with Phaser

Well done!

You have completed Game Development with Phaser!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

My Development Setup

3:30 with Richard Oliver Bray

Learn how to set up and customize your Visual Studio Code (VSCode) and terminal to match what will be used in this course.

In this video, we're going to run through the tools and 0:00
extensions that will be used in this course. 0:02
There's absolutely no need to copy what I'm using. 0:05
This is just so you're aware of why my setup looks different from yours. 0:09
Cool, you may already have noticed that we'll be using VS code for this course. 0:14
Right now, the default dark theme is being used with a font called fear of code. 0:19
Font ligatures have been turned on, 0:25
which make the code more pleasant to read in my opinion. 0:28
This works by merging certain symbols together. 0:31
For example, if I created a new file by pressing command and on the keyboard, 0:35
and press the equals key three times, it would look like this. 0:40
This is what they look like with font ligatures turned off. 0:45
Let's see what they look like when we turn ligatures on. 0:49
We can do this by going into the settings menu. 0:52
Let's press Shift Command P on the keyboard to access the command palette, 0:56
typing settings And then click on Settings JSON. 1:01
Once you've got that scroll down to line 68 and 1:05
change ligatures from false to true. 1:10
Now let's save this file, and click on the Untitled tab. 1:15
We can see the equals look like they've been merged together. 1:19
The videos in this course are going to have font ligatures turned on, but 1:24
you can choose to have them turned on or off. 1:28
Cool, let's move on to extensions. 1:32
Again, these extensions are not required for this course. 1:35
So, if you're using something similar, 1:39
please feel free to stick with that instead. 1:41
The first extension I'd recommend is this one called Error Lens. 1:43
This is helpful for exposing code errors in the editor, 1:47
even before running the code. 1:51
Next is Prettier, which is a popular extension for formatting code. 1:53
For this course, I'm going to enable the setting to automatically format whenever I 1:58
save a file. 2:03
Next is Code Spellchecker. 2:05
This is used for spotting any spelling mistakes in the code. 2:07
It does a good job of separating code syntax from words that need to be spelled 2:10
correctly. 2:14
And the final extension is npm Intellisense. 2:17
This automatically imports the correct JavaScript package as you type 2:20
the name of it into your code. 2:25
Okay, now the VS Code stuff is out of the way, 2:28
let's move on to talk about the terminal. 2:31
For this course, the terminal in VS Code will not be used. 2:34
This is because if VS Code crashes or needs an update, 2:39
the processes running in the terminal will stop and I'd like them to continue. 2:42
The default Mac terminal will be used for 2:48
this course instead with a profile called Pro. 2:51
This makes the background black and the text white. 2:54
Node.js will also be used for this course, but only in the second stage. 2:58
We'll be using the latest LTS version, 3:04
which at the time of recording is 18.17.0. 3:07
You can check the version of nodes you have on by typing in node 3:11
space hyphen v into your terminal, and that's it. 3:16
Now that we've got all the housekeeping stuff out of the way, let's go ahead and 3:21
talk about what we're gonna build in the first stage of this course. 3:25