Super Paper Monster Smasher Starter Kit

Bcc93abebe48d10fc4471388e69bafec?s=47 jessefreeman@gmail.com
September 21, 2013
330

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

Bcc93abebe48d10fc4471388e69bafec?s=128

jessefreeman@gmail.com

September 21, 2013
Tweet

Transcript

  1. 2.
  2. 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.
  3. 5.
  4. 6.
  5. 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.
  6. 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.
  7. 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.
  8. 11.
  9. 15.
  10. 16.
  11. 17.
  12. 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.
  13. 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
  14. 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/
  15. 22.
  16. 23.
  17. 24.
  18. 25.
  19. 26.
  20. 27.
  21. 28.
  22. 29.
  23. 30.
  24. 32.
  25. 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
  26. 36.
  27. 37.
  28. 38.
  29. 45.
  30. 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");
  31. 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']);
  32. 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.
  33. 51.
  34. 52.
  35. 53.
  36. 54.
  37. 55.
  38. 56.
  39. 57.
  40. 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.
  41. 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/
  42. 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.
  43. 63.
  44. 64.
  45. 65.
  46. 66.
  47. 67.
  48. 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.
  49. 71.
  50. 72.
  51. 73.
  52. 77.
  53. 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.
  54. 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.
  55. 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
  56. 84.
  57. 85.
  58. 86.
  59. 87.
  60. 88.
  61. 89.
  62. 90.
  63. 91.
  64. 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.
  65. 93.
  66. 94.
  67. 95.
  68. 96.
  69. 97.
  70. 99.
  71. 101.

    Use this Starter Kit to help jumpstart your next HTML5

    game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/srr-kit
  72. 102.

    Use this Starter Kit to help jumpstart your next HTML5

    game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/YLdht4
  73. 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.
  74. 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