Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Super Paper Monster Smasher Starter Kit

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

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. You can download the slides at http://bit.ly/spms-talk

  2. None
  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

  5. None
  6. None
  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

  11. None
  12. http://nodejs.org/

  13. http://gruntjs.com/

  14. http://bit.ly/spms-kit

  15. None
  16. None
  17. None
  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/
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. > npm

  31. > npm install -g grunt-cli

  32. None
  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

  37. None
  38. None
  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

  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  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.
  63. None
  64. None
  65. None
  66. None
  67. None
  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.
  71. None
  72. None
  73. None
  74. Customizing

  75. http://bfxr.net

  76. http://audacity.sourceforge.net

  77. None
  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
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  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.
  93. None
  94. None
  95. None
  96. None
  97. None
  98. http://bit.ly/Y2bdQT

  99. None
  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