Learning 01: Set up your programming environment
However, you should not use a basic text editor for significant programming!
It can take an entire afternoon to track down an obscure syntax error in your code. A professional IDE will point out such errors as you type them.
How would you rather spend your time?
You’re in a job interview at Really Cool Game Company.
“Notepad, whatever,” you answer with cool nonchalance.
You are soon flipping patties at Swift Burgers.
Professionals use IDEs. Act professional.
WebStorm is commercial software, but students and educators can get a free license by registering with their .edu mailing address.
Which browser to use?
Google Chrome, Mozilla Firefox and Microsoft Edge are good choices for Perlenspiel development under Windows. Chrome is currently the champ in terms of performance, close compliance with HTML5 standards, and general lack of flakiness.
By default, Firefox is a bit more lenient about security, which can make it easier to use for developing advanced projects that employ custom media resources, such as images or audio.
All of these browsers come equipped with surprisingly good debugging tools, easily accessed from standard menus. Refer to browser documentation for details.
Apple’s Safari browser is currently not compliant with HTML5 standards, and is not recommended for development or deployment of Perlenspiel games. If you’re working on a Macintosh, use Chrome or Firefox instead.
Setting up a new Perlenspiel project with WebStorm is easy:
1. Create a directory for your project in a convenient place. Name the directory to match the title of your project.
2. Grab a copy of the latest Perlenspiel devkit from the Download page. Unzip the devkit. Copy these three files from the devkit into your project directory:
You don’t need to copy the Licenses/ subdirectory. The enclosed legal notices are required to be included in the devkit, but don’t affect the operation of the engine.
3. In WebStorm, select File->New Project from the main menu. A dialog box will appear.
4. Press the browse button at the end of the Location field, and navigate to the location of your project folder. The Project Name field will be automatically filled in with the name of your folder. Leave the Project Type field set to Empty Project. Click the OK button.
5. WebStorm will ask if you want to create your project using existing files. Click the Yes button.
That's it! Your new project will appear at the top of the file list on the left side of the IDE. Press the + button beside your project name to reveal the devkit files. Open the game.js file and edit it to create your game.
To test your work, open the game.html file. Move your cursor near the top-right corner of the editor window. A line of icons representing the browsers available to WebStorm will appear. Click the icon of a browser and your game will launch.
When your project is finished, you can move it to the cloud by copying your entire project directory to a Web server, and make it visible by providing a link to the game.html file in that location.
Custom cover images
The image contained in the devkit’s cover.png file is displayed under the Touch image to begin notice when the engine starts.
You can freely change the generic image in the cover.png file to suit your application, as long as (a) it stays in the same directory as the game.html and game.js files, (b) the original filename is not changed, and (c) the original dimensions of the image (512 x 512 pixels) are not altered.
If no cover.png file is present in the same directory as the game.html file when the engine starts, or if the file fails to load for any reason, an image of the Perlenspiel logo is displayed instead.
Terms to know
- IDE (Integrated Development Environment)
Next: Elements and layout