Richard Roylance

South Park Space Invaders School Project

2018-01-15T00:00:00+00:00

South Park Space Invaders School Project

Found my old high school project where I chose to make a South Park themed Space Invaders style game.

Notes

I do not own the rights to anything South Park related; this is just a little fan game I made in high school using images found online and music and sound effects from South Park Studios website. With a request from the right people I will remove this project, no problem.

If you look at the code or project please note this was one of my first programming projects past in class examples over 10 years ago.

Due to this being a school project back in the day, it has a couple quirks… to play the game you need to ‘register’, which just means put whatever you want in the username and password fields on the register screen and you can then login with that info. Part of the project was to have a login screen and so there it is.

Other than that, just have fun.

Game

You play as either Stan, Kyle , Cartman, or Butters in a fight against the Crab people and a couple bosses along the way. There is also a 2-player snow ball fight mode.

Controls

Single-Player

A or LEFT ARROW - Left

D or RIGHT ARROW - Right

SPACE - Shoot

Multi-Player

Player 1

W - Up

S - Down

SPACE - Shoot

Player 2

UP ARROW - Up

DOWN ARROW - Down

NUMPAD 0 - Shoot

To Play

You should be able to simply run the Final.exe in Final/bin/Debug/

You can download the south-park-space-invaders-v1.0.0.zip via the Releases page to just get the build.

Credits

Designed & Developed by: Richard Roylance (@rroylance)

Sounds curtesy of: www.southparkstudios.com

Git Tips & Tricks

2017-12-18T00:00:00+00:00

Do you have a tip you’d like added ? Post in the comments below or send me an email.

What is Git?

By far, the most widely used modern version control system in the world today is Git. Git is a mature, actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel. A staggering number of software projects rely on Git for version control, including commercial projects as well as open source. Developers who have worked with Git are well represented in the pool of available software development talent and it works well on a wide range of operating systems and IDEs (Integrated Development Environments).

Having a distributed architecture, Git is an example of a DVCS (hence Distributed Version Control System). Rather than have only one single place for the full version history of the software as is common in once-popular version control systems like CVS or Subversion (also known as SVN), in Git, every developer’s working copy of the code is also a repository that can contain the full history of all changes.

In addition to being distributed, Git has been designed with performance, security and flexibility in mind.

On to the Tips…

Basics

Create empty Git repo in specified directory. Run with no arguments to initialize the current directory as a git repository.

    git init <directory>

Clone repo located at onto local machine. Original repo can be located on the local filesystem or on a remote machine via HTTP or SSH.

    git clone <repo>

Define author name to be used for all commits in current repo. Devs commonly use –global flag to set config options for current user.

    git config user.name <name>

Stage all changes in for the next commit. Replace with a to change a specific file.

    git add <directory>

Commit the staged snapshot, but instead of launching a text editor, use as the commit message.

    git commit -m "<message>"

List which files are staged, unstaged, and untracked.

    git status

Display the entire commit history using the default format. For customization see additional options.

    git log

Show unstaged changes between your index and working directory.

    git diff

Undoing Changes

Create new commit that undoes all of the changes made in , then apply it to the current branch.

    git revert <commit>

Remove from the staging area, but leave the working directory unchanged. This unstages a file without overwriting any changes.

    git reset <file>

Shows which files would be removed from working directory. Use the -f flag in place of the -n flag to execute the clean.

    git clean -n

Rewriting History

Replace the last commit with the staged changes and last commit combined. Use with nothing staged to edit the last commit’s message.

    git commit --amend

Rebase the current branch onto . can be a commit ID, a branch name, a tag, or a relative reference to HEAD.

    git rebase <base>

Show a log of changes to the local repository’s HEAD. Add –relative-date flag to show date info or –all to show all refs.

    git reflog

Branches

List all of the branches in your repo. Add a argument to create a new branch with the name .

    git branch

Create and check out a new branch named . Drop the -b flag to checkout an existing branch.

    git checkout -b
<branch>

Merge into the current branch.

    git merge <branch>

Remote Repositories

Create a new connection to a remote repo. After adding a remote, you can use as a shortcut for in other commands.

    git remote add <name> <url>

Fetches a specific , from the repo. Leave off to fetch all remote refs.

    git fetch <remote> <branch>

Fetch the specified remote’s copy of current branch and immediately merge it into the local copy

    git pull <remote>

Push the branch to , along with necessary commits and objects. Creates named branch in the remote repo if it doesn’t exist.

    git push <remote> <branch>

Config

Define the author name to be used for all commits by the current user

    git config --global user.name <name>

Define the author email to be used for all commits by the current user

    git config --global user.email <email>

Create shortcut for a Git command. E.g. alias.glog log –graph –oneline will set git glog equivalent to git log –graph –oneline.

    git config --global alias. <alias-name> <git-command>

Set text editor used by commands for all users on the machine. arg should be the command that launches the desired editor (e.g., vi).

    git config --system core.editor <editor>

Open the global configuration file in a text editor for manual editing.

    git config --global --edit

Log

Limit number of commits by . E.g. git log -5 will limit to 5 commits

    git log -<limit>

Condense each commit to a single line.

    git log --oneline

Display the full diff of each commit.

    git log -p

Include which files were altered and the relative number of lines that were added or deleted from each of them.

    git log --stat

Search for commits by a particular author.

    git log --author= ”<pattern>”

Search for commits with a commit message that matches .

    git log --grep=”<pattern>”

Show commits that occur between and . Args can be a commit ID, branch name, HEAD, or any other kind of revision reference.

    git log <since>..<until>

Only display commits that have the specified file.

    git log -- <file>

–graph flag draws a text based graph of commits on left side of commit msgs. –decorate adds names of branches or tags of commits shown.

    git log --graph --decorate

Diff

Show difference between working directory and last commit.

    git diff HEAD

Show difference between staged changes and last commit

    git diff --cached

Show difference between two branches, and

    git diff <branch_1>..<branch_2>

Show difference between two branches, and , based on their common anscestor

    git diff <branch_1>...<branch_2>

Reset

Reset staging area to match most recent commit, but leave the working directory unchanged.

    git reset

Reset staging area and working directory to match most recent commit and overwrites all changes in the working directory.

    git reset --hard

Move the current branch tip backward to , reset the staging area to match, but leave the working directory alone.

    git reset <commit>

Same as previous, but resets both the staging area & working directory to match. Deletes uncommitted changes, and all commits after .

    git reset --hard <commit>

Rebase

Interactively rebase current branch onto . Launches editor to enter commands for how each commit will be transferred to the new base.

    git rebase -i <base>

Pull

Fetch the remote’s copy of current branch and rebases it into the local copy. Uses git rebase instead of merge to integrate the branches.

    git pull --rebase <remote>

Push

Forces the git push even if it results in a non-fast-forward merge. Do not use the –force flag unless you’re absolutely sure you know what you’re doing.

    git push <remote> --force

Push all of your local branches to the specified remote

    git push <remote> --all

Tags aren’t automatically pushed when you push a branch or use the –all flag. The –tags flag sends all of your local tags to the remote repo

    git push <remote> --tags

Phaser-CE NPM Webpack TypeScript Starter Project

2017-02-01T00:00:00+00:00

Phaser-CE NPM Webpack TypeScript Starter Project (catchy name, isn’t it?)

Needs a little updating at the moment, but shouldn’t be too much.

Hit the ground running and make some great games!

If you use this template/starter project in any capacity; I’d love to hear about your experience with it. Whether you continued with it or decided not to (I really want to hear why you made your decision).

Features:

Phaser-CE 2.11.1 (npm module, no having to download the library separately…)
TypeScript + TSLint
3 States (Boot, Preloader, Title) showing transition between states and where some things should be done and how a TypeScript state looks
Google Web Font loader
Webpack
Separate Development and Distribution builds
Live server (builds and reloads the browser on changes)
No hassle asset management requiring no code, on your part, to load and parse assets
- Assets are required and hashed via webpack, you can now guarantee that when you push an update, everyone will get the new files and not cached ones
- Assets class created automatically allowing you to access all the assets and their frames and sprites (in the case of Atlases and Audiosprites) in a compiler validating way!
Setting up the game size and scaling through a script that does it all for you
- Automatic template background
- Sets up the size the game so that it is scaled only when absolutely necessary
- Refer to src/utils/utils.ts for an explanation on the background_template and the sizing/scaling style
- Landscape and Portrait support

TODO (in no particular order):

Clean up generateAssetsClass.js
Get Custom/Local Web Fonts hashed by Webpack (to avoid cache issues)
- If anyone has experience webpacking font-face in css style web fonts and loading said fonts via webfontloader, let me know as I was having some trouble getting the font-face src to use the hashed assets.
Multiple resolution asset loader (@2x, @3x, etc…)
Yeoman Generator
Optional Analytics integration
Optional Cordova integration for iOS and Android builds

Folder Structure:

assets/ – This is where your assets that are processed when building goes
assets_raw/ – This folder is NOT processed at all and is merely an organizational folder (I use it for things like my individual images that get compiled into a spritesheet, individual sounds that get compiled into an audiosprite, etc…)
dist/ – This is where the built game will go
node_modules/ – This is where the node modules required for the game will be put with npm install
scripts/ – This is where node scripts go
src/ – This is where all the games code goes
templates/ – This is where the html template that gets built by Webpack goes
.gitignore – List of files and folders that are ignored by git
.npmrc – List of some project wide npm settings
electron-main.js – Entry point and application life controller for electron builds
package.json – Node config for the project
README.md – This is the README displayed ont he GitHub page
README_HEADER.png – This is just the header image for the GitHub README
tsconfig.json – List of some TypeScript settings
tslint.json – List of some TypeScript Linting rules
webpack.dev.config.js – Webpack config for the DEV build
webpack.dist.config.js – Webpack config for the DIST build

Setup:

To use this you’ll need to install a few things before you have a working copy of the project. But once you have node.js installed it only takes a few seconds and a couple commands to get going.

0. Install Git:

GIT Installation Instructions and Links

1. Download or Clone this repo:

Download:

Download the latest zip/tar.gz from GitHub Releases, extract it to where you want your project to be.

If you want a clean project ready for you to just start your own game and not have to worry about cleaning up the examples and samples from the v1.11.0 release, just download the v1.11.0-fresh release instead.

Clone (must’ve completed Step 0 first):

Navigate into your workspace directory.

Run:

git clone https://github.com/rroylance/phaser-ce-npm-webpack-typescript-starter-project.git

If you want a clean project ready for you to just start your own game and not have to worry about cleaning up the examples and samples from the master branch, just pull the ‘fresh-start’ branch instead of master.

2. Install node.js and npm (npm is included and installed with node.js):

NodeJS Installation Instructions and Links

3. Install dependencies:

Navigate to the cloned repo’s directory.

Run:

npm install

4. Run the dev server:

Run to use the dev build while developing:

npm run server:dev

Run to use the dist build while developing

npm run server:dist

The only real reason I can think of to use the dist server is if the minification process is breaking something in your game and you need to test using the minified version, or something you excluded with the DEBUG flag shouldn’t have been excluded.

This will run a server that serves your built game straight to the browser and will be built and reloaded automatically anytime a change is detected.

Build for testing/developing/debugging:

Run:

npm run build:dev

This will build the game with a few caveats;

A compile time flag, DEBUG, set to true; allowing you to include or not include certain code depending on if it’s DEBUG build or not.
The resulting game.js will not be minified

Build for release:

Run:

npm run build:dist

This will build the game with a few caveats;

The compile time flag, DEBUG, set to false; allowing you to include or not include certain code depending on if it’s DEBUG build or not.
The resulting game.min.js will be minified

Generate Assets Class:

This project will manage your assets for you! All you need to do is drop your assets in assets/ (subdirectories do not matter) and run (you need to run this manually if you change assets while the server is running, otherwise it’s run automatically when running a build);

npm run assets

or (if your dev GOOGLE_WEB_FONTS is different from your dist);

npm run assets:dev

src/assets.ts will be generated which contains sections for all your asset types (the generator is smart enough to distinguish what assets are what !) and classes for every asset, it will also generate an enum containing every frame and sprite in Atlases and AudioSprites respectively!

No need to remember keys, frames, or sprites anymore; which means no more typos resulting in asset not found errors. Just use, for example, Assets.Images.ImagesBackgroundTemplate.getName() or Assets.Audiosprites.AudiospritesSfx.Sprites.Laser1. This also allows the compiler to warn you if you are trying to use an asset that doesn’t exist!

The preloader will use this class to load everything, you don’t have to do anything in code to get your assets loading and available (except for any assets you need for your loading screen…)!

Currently supports the following (if you need a new extension or find an issue with one of your assets not exporting correctly, just let me know);

Images:
- bmp, gif, jpg, jpeg, png, webp
Spritesheets:
- bmp, gif, jpg, jpeg, png, webp
- [frameWidth, frameHeight, frameMax, margin, spacing] - frameWidth & frameHeight are required.
- Example: spritesheet.[100, 100].png
Atlases:
- bmp, gif, jpg, jpeg, png, webp
- json (the loader figures out if it’s a JSONArray or JSONHash, no need to remember or care), xml
Audio:
- aac, ac3, caf, flac, m4a, mp3, mp4, ogg, wav, webm
Audiosprites:
- aac, ac3, caf, flac, m4a, mp3, mp4, ogg, wav, webm
- json
Local Fonts:
- eot, otf, svg, ttf, woff, woff2
- css
Bitmap Font:
- bmp, gif, jpg, jpeg, png, webp
- xml, fnt
JSON:
- json
Tilemap JSON:
- json
XML:
- xml
Text:
- txt
Scripts:
- js
Shaders:
- frag

Which version of the audio to load is defined in the webpack.dev.config.js and webpack.dist.config.js under the DefinePlugin ‘SOUND_EXTENSIONS_PREFERENCE’ section;

Currently I set the order to: webm, ogg, m4a, mp3, aac, ac3, caf, flac, mp4, wav
The loader will load the audio using this as the preference; the first supported file that is found is used using the order of this list as most preferred to least preferred

Change the game size and generate a template background:

Note: This is automatically run after running npm install, however you may want to run it again (if you deleted the background.png and want it back, or if you want to change the game size from the default).

Run:

npm run setupGameSize

This will run a script that will generate a template background showing the safe and decoration area of your game when it is sized or scaled for different devices as well as updating a couple global values in the webpack configs so that the game knows about the new size when built.

If you do not want the default 800 x 500 with this scaling style, run the following and all will be updated.

DO NOT MODIFY THE (DEFAULT or MAX)_GAME_(WIDTH or HEIGHT) OR SCALE_MODE PLUGINS DEFINED IN THE WEBPACK CONFIGS, OR THIS WILL NOT WORK;

Run the following for descriptions and default values for all possible options;

npm run setupGameSize -- -h

Run the following specifying some or all of the options;

npm run setupGameSize -- --width [whatever width you want] --height [whatever height you want] --aspect-ratio [If you want a different default aspect ratio] --scale-mode [one of the Phaser Scale Modes] [--no-png]

The ‘–’ after setupGameSize is not a mistake; it is required to pass arguments along to the script.

You can either provide the width and height (defaults 800 and 500 respectively) and as long as they result in an aspect ratio of what’s set in the script or by –aspect-ratio, or you can provide the width or height and the one you didn’t provide will be calculated for you using the aspect ratio of what’s set in the script or by –aspect-ratio.

Provide –aspect-ratio to change the desired aspect ratio (default 1.6 or 16:10). The script checks to make sure the width and height match the aspect ratio so you get warned early about an incorrect dimension (maximum precision of 3 decimal places).

Providing –scale-mode will set this.game.scale.scaleMode to the corresponding Phaser.ScaleManager.SCALE_MODE (default USER_SCALE).

If you do not want the background to be created just add the flag –no-png (not putting this will let the background generate).

Google Web Fonts:

Add your desired Google Web Fonts to the webpack.dev.config.js and/or webpack.dist.config.js in the DefinePlugin ‘GOOGLE_WEB_FONTS’ section and they will then be loaded and available via Assets.GoogleWebFonts.

Custom/Local Web Fonts:

Add your desired Custom/Local Web Fonts to your assets folder and they will then be loaded and available via Assets.CustomWebFonts

The various font files, and the css MUST share the same name
One CSS file per font

I recommend one of the following generators for generating your font files;

Plugin management:

Drop the .js file (or .min.js) of the plugin in the assets/script folder. Your script(s) will be loaded in the Preloader state with the AssetUtils.Loader.loadAllAssets call. If you want the typescript support, you need to drop the .d.ts file somewhere (not in assets) and add it to the files array in tsconfig.json.

Here is an example of how to include your plugin in a state:

export default class MyState extends Phaser.State {

    myPlugin: Phaser.Plugin.MyPlugin;

    public preload(): void {
        this.myPlugin = new Phaser.Plugin.MyPlugin(this.game);
        this.game.plugins.add(this.myPlugin as any);
    }
}

Desktop Build via Electron

Note that I am not, currently, actively using this. So if you do, I’d appreciate if you could pass any changes you make or anything you need out of it. Although I’m not using it, I will still support it as best I can.

You can test your game via Electron by running;

npm run electron:dev

npm run electron:dist

To build the dev or dist version of your game, respectively, and then open up your game in an Electron instance.

Package Desktop App via Electron

You can package your game for Windows (win32 ia32/x64), OSX (darwin ia32/x64), Mac App Store (mas ia32/x64), Linux (linux ia32/x64/armv7l) using the following script;

npm run electron:pack:dev

npm run electron:pack:dist

To package the dev or dist version of your game, respectively, for the current platform you are on. You can provide many options to build specific platforms, for specific architectures, provide an icon, etc.

Refer to the API Documentation for a full list and details; I’m using it kind of oddly in that I’m using the API from the command line and not the command line version… to provide options appaend ‘ – ‘ to the npm run command and then also append ‘–’ to the option name and then either put the value after a space or ‘=’, either way. Examples;

npm run electron:pack:dist -- --platform win32 --arch=ia32 //32 bit Windows exe

npm run electron:pack:dist -- --platform win32,darwin --arch=ia32,x64 //32 and 64 bit Windows exe and OSX app

All builds will be in the builds/ folder in appropriately named folders.

Note that building for Windows from a non windows device requires a little bit of extra setup; refer to Building Windows apps from non-Windows platforms.

Also note that for OSX / MAS target bundles: the .app bundle can only be signed when building on a host OSX platform.

Bugs/Issues?

If you have any issues please let me know via GitHub Issues!

Requests/Suggestions?

If you have any requests or suggestion for the project please let me know via GitHub Issues!

Contributing Code?

If you would like to have some of your code included; whether a new feature, a cleaned up feature, a bugfix, or whatever. Please open up a Pull Request!

Games made with this project (Click the images to play!)

Game: America First: The Game

Author: Enzo Testa

Github Repo: https://github.com/Shrakka/DoublePong

Description: This is Enzo’s first game! Well done double pong demo.

Game: Coffee Conundrum

Author: Jonathan Grangien

Github Repo: https://github.com/codingInSpace/CoffeeConundrum

Description: Cool little SHMUP. Code looks well done and nice and clean and well thought out. Nice job Jonathan!

Game: P0ng

Author: ProfitWarning

Github Repo: https://github.com/ProfitWarning/p0ng

Description: Nice 2-player pong clone.

Game: Great Run

Author: Róbert Girhiny

Github Repo: https://github.com/robcaa/great-run

Description: Nice Dora The Explorer themed platformer/runner for kids.

Phaser Tips & Tricks

2016-05-13T00:00:00+00:00

Do you have a tip you’d like added ? Post in the comments below or send me an email.

What is Phaser?

Phaser is a fast, free and fun open source HTML5 game framework. It uses a custom build of Pixi.js for WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and desktop apps via 3rd party tools like Cocoon, Cordova and Electron.

Along with the fantastic open source community Phaser is actively developed and maintained by Photon Storm Limited. As a result of rapid support and a developer friendly API Phaser is currently one of the most starred game frameworks on GitHub.

Thousands of developers worldwide use it. From indies and multi-national digital agencies to schools and Universities. Each creating their own incredible games. Grab the source and join in the fun!

On to the Tips…

When using tweens, set the value to a string instead of a number to make the tween relative to the current value.

    var style = { font: "65px Arial", fill: "#FF0000", align: "center" };
    var text = game.add.text(game.world.centerX, game.world.centerY, "PHASER!", style);
    text.anchor.set(0.5);
    text.alpha = 0.5;

    //This will tween the alpha to 1 since the alpha starts at 0.5 and the value was used as a string.
    game.add.tween(text).to( { alpha: "0.5" }, 2000, "Linear", true);
    //This will do nothing, since the alpha is already 0.5.
    game.add.tween(text).to( { alpha: 0.5 }, 2000, "Linear", true);
    //This will do tween the alpha to 1, but is more verbose than just using the string.
    game.add.tween(text).to( { alpha: text.alpha + 0.5 }, 2000, "Linear", true);

When working with pixel art set roundPixels to true to prevent Phaser from rendering graphics at sub pixel locations (which causes blurring)

    game.renderer.renderSession.roundPixels = true;

When you need to set a property on all children in a Group, don’t use a loop, simply use setAll.

    group.setAll("property.evenSubPropertiesAreSupported", value);

Need the benefits of using a sprite as a container and a group just wont cut it? Use a blank sprite!

    //This leaves the sprite frame, sprite sheet ID, and parent group blank;
    //Adding the sprite to the world.
    var sprite = game.add.sprite(0, 0);

    //This leaves the sprite frame, and sprite sheet ID blank;
    //Adds the sprite to the specified group.
    var sprite = game.add.sprite(0, 0, undefined, undefined, group);

Destroying an object in the onComplete callback of a tween being performed on the object will cause errors. You can either kill the object (does not destroy the object or remove it from memory), or delay the destroy call by one frame using pendingDestroy.

    //Causes errors
    game.add.tween(sprite).to({ alpha: 0 }, 1000, 'Linear', true).onComplete.addOnce(sprite.destroy, sprite);

    //.kill method
    game.add.tween(sprite).to({ alpha: 0 }, 1000, 'Linear', true).onComplete.addOnce(sprite.kill, sprite);

    //.pendingDestroy method
    game.add.tween(sprite).to({ alpha: 0 }, 1000, 'Linear', true).onComplete.addOnce(function () {
        sprite.pendingDestroy = true;
    });

    //or

    game.add.tween(sprite).to({ alpha: 0 }, 1000, 'Linear', true).onComplete.addOnce(function () {
        this.pendingDestroy = true;
    }, sprite);

Have a full screen background? Set Phaser.Game.clearBeforeRender to false to get rid of the un-needed clear screen draw call.

    game.clearBeforeRender = false;

Making a production build of your game? Disable Phaser.Debug to get rid of the un-needed empty texture draw call (Even if you are not using Phaser.Debug at all (which you should never do in production anyway) an empty texture is drawn.)

    var config = {
        width: 800,
        height: 600,
        enableDebug: false // this flag right here!
    };
    
    var game = new Phaser.Game(config);

Doing the previous 2 tips, you can possibly get your game down to a single draw call! Without them the minimum draw calls you can get is 3.

Setting up Acer CB3-531-C4A5 Chromebook for development

2016-05-13T00:00:00+00:00

Back at the end of March I saw the Acer CB3-531-C4A5 Chromebook was on sale on Newegg for the pretty decent price of $170 CAD (~~as of writing this, still on sale for $200 CAD~~ now out of stock), so I thought ‘What the hell, let’s see what we can do with these Chromebook things’. I was pleasently surprised and love my Chromebook, this post will take you step by step from factory fresh to running the latest and greatest Ubuntu 16.04 LTS codename ‘Xenial Xerus’ along side the latest Chrome OS with the ability to run Ubuntu Desktop (XFCE in this case) or even specific programs in a window within Chrome OS !

Step 1: Set your Chromebook to Developer Mode

Press and hold the esc+refresh keys, then press the power key (while still holding the other two). This will reboot your Chromebook into Recovery Mode.
As soon as you see Recovery Mode pop up (the screen with the yellow exclamation point) press ctrl+d. This will bring up a prompt asking if you want to turn on Developer Mode.
Press enter to continue, then give it some time. It’ll pop up with a new screen for a few moments, then reboot and go through the process of enabling Developer Mode.
When it’s done, it will return to the screen with the red exclamation point. Press ctrl+d or leave it alone for 30 seconds and it will boot into Chrome OS, now in Developer Mode.

Step 2: Install crouton extension

Navigate to crouton integration Extension @ Chrome Webstore
Click ‘+ ADD TO CHROME’ button in the top left of the popup
Click ‘Add extension’ in the next popup
After a few seconds you should see a new page open up saying ‘Thank you for installing the crouton extension!’
You can now close those tabs and confirm that the extension is running by looking for the C icon in the top right of Chrome.

The crouton integration extension is now installed and we can move on to actually installing Ubuntu.

Note: From this point on I assume that you haven’t changed your default download location/ your crouton installer script is located in Downloads

Step 3: Download crouton

Navigate to crouton download link which will save the crouton installer script to your Downloads folder.

Step 4: Install Ubuntu

Anywhere inside ChromeOS press ctrl+alt+t; this opens up a crosh shell (Chrome OS developer shell).
Once the crosh shell is open type ‘shell’ to get the shell prompt.
Next it’s time to start the installation of Ubuntu; type the command ‘sudo sh ~/Downloads/crouton -r xenial -t xfce,xiwi’ and hit enter to start the process.
- The ‘-r’ in the command specifies what distribution you want to install. By default crouton will install an older LTS version, we want the latest and greatest.
- The ‘-t’ in the command specifies what targets to install; xfce is the desktop envioronment and xiwi is what allows us to run the Ubuntu desktop or applications in a window within ChromeOS.
The installation will take a while; once it is done downloading and installing things it will prompt you for a username to use for Ubuntu. Enter whatever you want that to be and hit enter.
You now need to enter your password for Ubuntu; note that you can’t not have a password, you must set something.
Give it another minute and once you see ‘chronos@localhost / $’ (the only green in the entire process) you’re all done and ready to use Ubuntu on your Chromebook!

Step 5: Setup Ubuntu

Enter the command ‘sudo startxfce4’; this will start the xfce desktop environment that we installed.
- You will need to open up the crosh shell, type ‘shell’ and then ‘sudo startxfce4’ everytime you reboot your Chromebook.
After a second or two Ubuntu should now start up fullscreen; click ‘Use default config’ on the popup that appears and wait until the desktop fully loads.
You can now click the fullscreen button on your Chromebook keybaord to put Ubuntu in windowed mode
While in windowed mode, or minimized, we can now confirm that the crouton integration extension is functioning by looking at the C icon in Chrome; there should be a 1 badge and clicking on it should show Chrome OS and xenial.

Step 6: Setup Git

In Ubuntu open up a terminal by clicking the icon on the dock on the bottom of the screen.
We are going to use apt to download and install git; first you need to run the command ‘sudo apt-get update’ to update the list of available packages. You will need to type the password you set back in the crouton setup to run the command using sudo (which is necessary).
Once that completes type the command ‘sudo apt-get install git-all’; you do not need your password this time because you already authenticated this session in the update command.
Once that completes you now have git cli installed and almost ready to use.
Lastly you need to set your email and name in the git config; run the command ‘git config –global user.email ‘your@email.com’‘ to set your email.
Now run the command ‘git config –global user.name ‘Name’‘ to set your name. You are now ready to use git to your hearts content.

Step 7: Download Sublime Text 3, clone a project from Github, and open that project in Sublime Text

We are going to use apt again to install Sublime Text 3; open up a terminal.
We need to add the repository that hosts the Sublime Text installer; so to start we need to install the command that allows us to add a repository to apt. Run the command ‘sudo apt-get install software-properties-common python-software-properties’ 2.1 Type ‘Y’ then press ‘enter’ when prompted.
Once that is complete run the command ‘sudo add-apt-repository ppa:webupd8team/sublime-text-3’ 3.1 Press ‘enter’ when prompted.
Now to actually install Sublime Text 3; run the comman ‘sudo apt-get install sublime-text-installer’
Sublime Text 3 is now installed; open the program from the Applications (top left of desktop) > Development > Sublime Text
For demonstration here, I’ll be cloning the repo for this site; start by navigating to whatever directory you want to store the project in, in this case Documents. Run the command ‘cd ~/Documents/’
Next clone the repo by running the command ‘git clone https://github.com/rroylance/rroylance.github.io.git’
Back in Sublime Text open the folder through ‘File > Open folder… > username (on left pane) > then the the project folder > Open in bottom right of popup’
Ready to go.

Richard Roylance

South Park Space Invaders School Project

South Park Space Invaders School Project

Notes

Game

Controls

Single-Player

Multi-Player

Player 1

Player 2

To Play

Credits

Git Tips & Tricks

Do you have a tip you’d like added ? Post in the comments below or send me an email.

What is Git?

On to the Tips…

Basics

Undoing Changes

Rewriting History

Branches

Remote Repositories

Config

Log

Diff

Reset

Rebase

Pull

Push

Tags

Thanks Atlassian for many of these, from their awesome Cheat Sheet

Phaser-CE NPM Webpack TypeScript Starter Project

Phaser-CE NPM Webpack TypeScript Starter Project (catchy name, isn’t it?)

Needs a little updating at the moment, but shouldn’t be too much.

Hit the ground running and make some great games!

If you use this template/starter project in any capacity; I’d love to hear about your experience with it. Whether you continued with it or decided not to (I really want to hear why you made your decision).

Features:

TODO (in no particular order):

Folder Structure:

Setup:

0. Install Git:

1. Download or Clone this repo:

Download:

If you want a clean project ready for you to just start your own game and not have to worry about cleaning up the examples and samples from the v1.11.0 release, just download the v1.11.0-fresh release instead.

Clone (must’ve completed Step 0 first):

If you want a clean project ready for you to just start your own game and not have to worry about cleaning up the examples and samples from the master branch, just pull the ‘fresh-start’ branch instead of master.

2. Install node.js and npm (npm is included and installed with node.js):

3. Install dependencies:

4. Run the dev server:

The only real reason I can think of to use the dist server is if the minification process is breaking something in your game and you need to test using the minified version, or something you excluded with the DEBUG flag shouldn’t have been excluded.

Build for testing/developing/debugging:

Build for release:

Generate Assets Class:

Change the game size and generate a template background:

Google Web Fonts:

Custom/Local Web Fonts:

Plugin management:

Desktop Build via Electron

Package Desktop App via Electron

Note that building for Windows from a non windows device requires a little bit of extra setup; refer to Building Windows apps from non-Windows platforms.

Also note that for OSX / MAS target bundles: the .app bundle can only be signed when building on a host OSX platform.

Bugs/Issues?

Requests/Suggestions?

Contributing Code?

Games made with this project (Click the images to play!)

Phaser Tips & Tricks

Do you have a tip you’d like added ? Post in the comments below or send me an email.

What is Phaser?

On to the Tips…

Doing the previous 2 tips, you can possibly get your game down to a single draw call! Without them the minimum draw calls you can get is 3.

Setting up Acer CB3-531-C4A5 Chromebook for development

Step 1: Set your Chromebook to Developer Mode

Step 2: Install crouton extension

Note: From this point on I assume that you haven’t changed your default download location/ your crouton installer script is located in Downloads

Step 3: Download crouton

Step 4: Install Ubuntu

Step 5: Setup Ubuntu

Step 6: Setup Git

Step 7: Download Sublime Text 3, clone a project from Github, and open that project in Sublime Text

Any questions, issues, etc. please post in the comments section below. Thanks for reading and hope you enjoy your Chromebook !