Super Paper Monster Smasher Starter Kit

This talk goes over setup and installation of my Super Paper Monster Smasher Starter Kit written in Impact. Download the source code at http://bit.ly/spms-kit

Transcript

1. You can download the slides at http://bit.ly/spms-talk
3. The Super Paper Monster Smasher Starter Kit is a side-scrolling monster smashing game. You take on the role of a large green monster which is under attack by a bunch of heroes and you have to try and survive as long as you can. Since this project is completely open source, you are free to build on top of it and add your own story, artwork, and sounds and then publish it.
4. http://bit.ly/spms-sk-demo
7. • ImpactJS Bootstrap: this is a standard library of code used across all of my Impact games and starter kits. • Entities: this directory contains all the entitles you need to build the game including a player, bad guys, spawners and upgrades. • Plugins: a collection of plugins to help get the starter kit working on each platform as well as additional ones used in the game. • Screens: this contains the main sections of your game such as the start screen and the game itself.
8. • Artwork: you get all of the artwork you need for the game and map editor. • Sounds: a collection of sound effects for you to get started with.
9. • 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. • Windows Store: Creates a native HTML5 app. • Windows Phone: Using a simple C# WebControl wrapper.
10. Built with
12. http://nodejs.org/
13. http://gruntjs.com/
14. http://bit.ly/spms-kit
18. • 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.
19. Setting up the
20. • Download the Super Paper Monster Smasher Starter Kit - https://bit.ly/spms-kit • Copy of Impact JS ($100) - http://impactjs.com • Git & GitBash (on Windows) - http://bit.ly/git-dl • NodeJS - http://nodejs.org/ • PHP (for Windows)- http://bit.ly/php5-dl
21. • Windows 8 (90 Day Trial) - http://msdn.microsoft.com/en- us/evalcenter/jj554510.aspx • Visual Studio Express - http://www.microsoft.com/visualstudio/eng/products/visual- studio-express-for-windows-8 • Aseprite - Sprite Editor http://www.aseprite.org/ • ShoeBox - Texture Atlas Packager http://renderhjs.net/shoebox/ • Bfxr - Sound Effect http://ded.bfxr.net/~locus/bfxr_update/Bfxr_WIN.zip • Audacity - Audio Editor http://audacity.sourceforge.net/
30. > npm
31. > npm install -g grunt-cli
33. > npm install
34. Running the
35. 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/spms-build
36. > grunt
39. > grunt bake
40. Copy over tmp folder to the deploy directory and it’s ready to be uploaded.
41. Change paths in source code to load from final deployment url structure.
42. Copy over minified JS file to Win8 project’s JS directory.
43. Copy over tmp directory to Html folder inside of the WP8 project.
44. > grunt debug
45. Making a
46. // 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");
47. 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']);
48. Customizing the
49. refers the to asset workflow you create for your project. This could be as simple as copying files over by hand into your game’s media folder or writing more complex automation scripts to generate the art for you.
50. http://www.aseprite.org
58. is a large image containing a collection of sub-images, or "atlas" which contains many smaller sub-images. This is used primarily in 3d for textures but is very useful for 2d games as well.
59. "filename": "radar-sprite.png", "rotated": false, "trimmed": true, "frame": {"x":0,"y":309,"w":104,"h":104}
60. Atlases can consist of uniformly-sized sub-textures, or they can consist of textures of varying sizes (usually restricted to powers of two). *Illustration from http://www.grimrock.net/modding/creating-custom-assets/
61. http://renderhjs.net/shoebox
62. • Create Texture Atlas with data file • Extract Sprites • Custom atlas data templates (can create xml, json, text, etc) • Create bitmap fonts • Cross platform • Works with Cocos2d, Unity3d, HTML5 and more.
68. http://bit.ly/Yqwwty
69. The Starter Kit
70. At the end of the day resolution comes down to aspect ratio, is your game 4:3 or 16:9 or even both? Good games can easily support either resolution, here is a sample from one of my game’s designs to show you how this works.
74. Customizing
75. http://bfxr.net
76. http://audacity.sourceforge.net
78. Publishing to
79. Like every app store out there you will have to register, pay a developer fee, and work through a submission process in order to launch your game. Submitting to the Windows Store starts by creating your developer account.
80. for individuals is $49, with a $99 fee for companies. The revenue share is 70%, but when an app achieves $25,000 in revenue—aggregated across all sales in every market—that changes to 80% revenue share for the rest of the lifetime of the app.
81. http://msdn.microsoft.com/en-us/windows/apps
82. https://www.microsoft.com/bizspark/SignUp/default.aspx
83. You will need to do the following in order to publish your game: 1) Reserve a game name 2) Fill in game description & details 3) Export build from Visual Studio 4) Validate app locally 5) Submit for approval
92. • Description: There is a 10,000 character limit for your description. • Keywords: You’ll need at least two to four of these to help with searching and discoverability. • Screenshots: These can be 1366x768 or 768x1366 saved as .png. You will also need to provide no more than 200 character captions for each screenshot. • Promotion Imagery: While not mandatory this will help you get your app featured if the editors like it. You will need to supply the following size .pngs: 846x468, 558x756, 414x468, and 414x180.
98. http://bit.ly/Y2bdQT
100. http://onegameamonth.com
101. Use this Starter Kit to help jumpstart your next HTML5 game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/srr-kit
102. Use this Starter Kit to help jumpstart your next HTML5 game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/YLdht4
103. 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.
104. 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/spms-talk