Slide 1

Slide 1 text

You can download the slides at http://bit.ly/grunt-talk

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

http://bit.ly/play-sfz

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

• Desktop Browsers: IE 9+, Chrome, Safari, & Firefox • Mobile Browsers: Windows Phone 8, iOS & Chrome for Android • Web Markets: Chrome Web Store and Mozilla’s Web Store • WebView/Native Wrappers: CocoonJS, AppMobi, PhoneGap and iOS using Ejecta • Windows Store: Windows 8 allows you to create native apps/games with HTML5/JS

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Getting started with

Slide 15

Slide 15 text

http://nodejs.org/

Slide 16

Slide 16 text

http://gruntjs.com/

Slide 17

Slide 17 text

http://git-scm.com/downloads

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

• I always develop my Windows 8 game just like I would any Web game. • I do all my testing in the browser. • I use Visual Studio as my IDE. • When I am ready to test on Windows 8 or Windows Phone I simply hit compile.

Slide 22

Slide 22 text

Installing

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

What is the

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

> npm init

Slide 30

Slide 30 text

{ "name": "SuperFallingZombies", "version": "1.0.0", "description": “A game about falling zombies.", "main": "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git://github.com/gamecook/super-falling-zombies.git" }, "author": "Jesse Freeman", "license": "MIT", "readmeFilename": "readme.md", "gitHead": "9cb42ceab42316c3acdd88b09b284e33d71fb232", "devDependencies": { "grunt": "~0.4.1", "grunt-express-server": "~0.4.0", "express": "~3.2.6", "grunt-shell": "~0.2.2", "grunt-contrib-watch": "~0.4.4", "grunt-contrib-copy": "~0.4.1", "grunt-text-replace": "~0.3.2", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-uglify": "~0.2.2", "grunt-open": "~0.2.0", "impact-weltmeister": "~0.1.4" } }

Slide 31

Slide 31 text

> npm install -g grunt-cli

Slide 32

Slide 32 text

Understanding the

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

What does

Slide 37

Slide 37 text

1. Copy all source code to tmp directory in deploy folder. 2. Combine all JS files into a single JS file. 3. Inject all JSON and other external data that would normally be loaded eternally. 4. Uglify final js. 5. Delete source code and tools from tmp Directory. 6. Perform builds for each platform. http://bit.ly/sfz-build

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

> npm install express --save-dev

Slide 40

Slide 40 text

> npm install grunt-shell --save-dev

Slide 41

Slide 41 text

> npm install grunt-contrib-watch --save-dev

Slide 42

Slide 42 text

> npm install grunt-text-replace --save-dev

Slide 43

Slide 43 text

> npm install grunt-contrib-clean --save-dev

Slide 44

Slide 44 text

> npm install grunt-contrib-uglify --save-dev

Slide 45

Slide 45 text

> npm install grunt-open --save-dev

Slide 46

Slide 46 text

Running the

Slide 47

Slide 47 text

> grunt

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

> grunt bake

Slide 51

Slide 51 text

Copy over tmp folder as is to deploy directory and it’s ready to be uploaded.

Slide 52

Slide 52 text

Change paths in source code to load from final deployment url structure.

Slide 53

Slide 53 text

Copy over minified JS file to Win8 project’s JS directory.

Slide 54

Slide 54 text

Copy over tmp directory to Html folder inside of the WP8 project.

Slide 55

Slide 55 text

Create app manifest, depending on what platform it’s going to be deployed to, and zip up the contents. This can be used for Chrome Store, Firefox OS, CocoonJS & AppMobi.

Slide 56

Slide 56 text

Making a

Slide 57

Slide 57 text

// config.js { "project": "Super Paper Monster Smasher Starter Kit", "rootProject": "./Projects/SuperPaperMonsterSmasherStarterKitWin8/", "wp8Project": "./Projects/SuperPaperMonsterSmasherStarterKitWP8/", "deployDir": "./Deploy/", "blogRootPath": "/wp-content/games/super-paper-monster-smasher-starter- kit/media/" } // load in gruntfile.js var config = grunt.file.readJSON("config.json");

Slide 58

Slide 58 text

grunt.registerTask('build-platforms', ['build-web', 'build-phone', 'build-blog', 'build-win8']) grunt.registerTask('bake', ['build-tmp', 'shell:game', 'clean:lib', 'replace:gamePath', 'uglify', 'build-platforms', 'clean:tmp']); grunt.registerTask('debug', ['build-tmp', 'build-platforms', 'clean:tmp']);

Slide 59

Slide 59 text

> grunt debug

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

http://bit.ly/10733d1

Slide 62

Slide 62 text

http://bit.ly/12GLDUU

Slide 63

Slide 63 text

Automating

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

http://bit.ly/12lLrZy

Slide 66

Slide 66 text

http://bit.ly/ZfTje9

Slide 67

Slide 67 text

Why did you

Slide 68

Slide 68 text

http://onegameamonth.com

Slide 69

Slide 69 text

Use this Starter Kit to help jumpstart your next HTML5 game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/sms-kit

Slide 70

Slide 70 text

Use this Starter Kit to help jumpstart your next HTML5 game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/srr-kit

Slide 71

Slide 71 text

Use this Starter Kit to help jumpstart your next HTML5 game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/YLdht4

Slide 72

Slide 72 text

Free workshops focused on Game Development here in NYC. New weekend events starting at the end of September and weekly studio time space every Wednesday in the Microsoft NYC office.

Slide 73

Slide 73 text

Don’t forget to visit jessefreeman.com to learn more about HTML5 and Windows 8 game development. You can download the slides at http://bit.ly/grunt-talk