The cross platform Defold game engine has grown to become a popular option for HTML5 game developers with games released on Poki, Google GameSnacks, Facebook Instant Games, Yandex and many other platforms. In this talk we'll share our collected learnings on how to successfully release HTML5 games. We will talk about best practices in terms of game design, monetization and the importance of designing your games to load fast and work well also on mobile HTML5.

2. BEST PRACTISES WHEN RELEASING
HTML5 GAMES
www.defold.com

3. AGENDA
● What is Defold?
● Best practices when releasing HTML5 games
○ Distribution
○ Monetization
○ Conversion to Play
○ Optimizing game size
○ Web Game Standards
● Q & A

4. WHAT IS DEFOLD?

6. FEATURES
● 2D and 3D
○ Tilemaps
○ Sprites
○ Meshes
○ Models
● Particle effects
● Physics
● Scene and GUI editor
● Code editor and debugger
○ Lua scripting

7. ZERO SETUP POLICY
● One download
○ Automatic updates
● Build for all supported platforms
○ No additional tools required
■ No Xcode
■ No Android Studio

8. 1M DAU - 4M MAU in 2021

9. 100M+ PLAYS IN 2021
Zoom-Be, Duo Survival, Duo Vikings, Words Emoji, Puffy Cat, Mahjong Cards, Party Toons, Raft Wars, Solitaire
Classic … and many more!

10. 2009 2010 2011 2012 2013 2014 2015
2016 2017 2018 2019 2020 2021
2022
Defold
Foundation

11. 2014 2015
2020 2021
Defold
Foundation
Defold
Foundation

12. RELEASING GAMES FOR HTML5

13. DISTRIBUTION
“Where and how to release your game”

14. DISTRIBUTION

15. MONETIZATION
“Are you making games for fun or for money?”

16. FOR FUN! OR FOR MONEY?

17. FOR FUN OR FOR MONEY!
● Design for monetization from the start!
○ Optimize your core game loop and meta game
○ Look at successful games in the genre
● Monetize through ads
○ Poki, Yandex, GameDistribution, Facebook etc
○ Google Ad Placement API for H5 Games

18. FOR FUN OR FOR MONEY!
● Sell or license your game
○ Google GameSnacks, Miniclip etc
● In-app purchases
○ Facebook, Yandex
● Microtransactions
○ WebMonetization
● Donations and sales
○ Itch.io
● Crowdfunding

19. CONVERSION TO PLAY
“Get as many players as possible!”

20. CONVERSION TO PLAY
Web games need to get players into the game quickly!
● Poki uses Conversion to Play as a metric
○ From discovery to first play
○ Loading experience, loading time, menus
■ Engine size plays a big role
● Example: 10 MB game
○ US 🚀 1 in 5 players drop
○ Egypt 🐌 2 in 5 players drop

21. DISCOVERY
● Stand out from the crowd!
○ Icon
○ Logo
○ Banner
○ Game title
○ Game page

22. LOADING EXPERIENCE
Goal: sub-second loading time
Reality: for many players there will be noticeable a delay
Don’t ignore your loading screen!
● Visually interesting
● Use a progress indicator
● Show helpful tips

23. ADD SHORTCUTS TO FUN!
● Skip main menu for new players?
○ Drop straight into a tutorial level?
● Reduce amount of user interaction required to start a new game
○ Replay button
○ “Play next level”
○ “Continue”

24. HUMANS ARE WORSE THAN GOLDFISH
“Microsoft found that since the year 2000 (or about when the mobile revolution
began) the average attention span dropped from 12 seconds to 8 seconds.”
A goldfish has an attention span of 9 seconds…

25. GENEROUS GAME DESIGN
“Giving something to the player, in hopes that they will sort of subconsciously
decide ‘ok that was cool, I’ll give you more of my time, what else you got’” - Adam
Saltsman, creator of Canabalt

26. THE STARBUCKS TEST
“Can you play your game and have a meaningful experience in the time it takes
for a barista to make your macchiato?” - Torsten Reil, CEO, Natural Motion
● Playing a level in Bejeweled Blitz
● Beating your longest run in Subway Surfers
● Playing a match in Venge.io
● Collecting a reward in Garden Tales

27. OPTIMIZING GAME SIZE
“Less is more”

28. ENGINE SIZE
● How small is your engine?
○ Defold: 848kb (wasm)
● Size of an empty project
○ Defold: 940kb (wasm+loader+index.html+archive)
● Can it be optimized further?
○ Remove features that are not used?
○ Defold: 756kb (wasm) removed 3D physics

29. GAME CONTENT SIZE
● Optimize and Compress textures
○ Pack textures
■ Defold: Basic texture packer included
○ WebP is great
■ Defold: BasisU with WebP coming as an extension
● Compress sounds
○ Mono or stereo?
○ Procedural sounds
● Compress content
○ Gzip over the wire
○ Defold: lz4 compression on game data archive

30. DIVIDE AND CONQUER
● Split content into manageable chunks
○ Download only what you need
○ Defold: Use LiveUpdate to exclude and download content

31. WEB GAME STANDARDS
“Follow the standards!”

32. WEB GAME STANDARDS
● Mobile H5
● Gamepads
● Sound and music
● Localization

33. WEB GAME STANDARDS - MOBILE
● Increasing in popularity - do not ignore!
● Things to consider:
○ Landscape and portrait mode or locked?
○ Handle different aspect ratios
○ Notch and hole-punch!
● Defold
○ No special configuration required
○ Try it! https://poki.com/en/g/foggy-fox

34. WEB GAME STANDARDS - GAMEPADS
● Consider supporting gamepads
○ Gamepad API available on 97% of browsers
○ Defold: Supported out of the box
● Handle disconnects properly
○ Pause menu!
○ Defold: Detect with the Disconnected and Connected input events

35. WEB GAME STANDARDS - SOUND AND MUSIC
● Autoplay policy!
○ Requires user interaction
● Pause audio when showing ads
○ Defold: sound.pause()
● Add options to toggle sound and music
○ Remember between sessions!
■ Defold: sys.save() and sys.load()

36. WEB GAME STANDARDS - LOCALIZATION
● EFIGS
○ English, French, Italian, German and Spanish
○ More depending on distribution platform
● Detect device/user language
○ Defold: Use sys.get_sys_info().language
■ Two character ISO-639 format, i.e. "en"

37. SUMMARY

38. SUMMARY
● Distribution
● Monetization
● Conversion to Play
● Optimizing game size
● Web Game Standards

39. Björn Ritzl
@bjornritzl
bjorn@defold.se
THANK YOU! ANY QUESTIONS?

40. www.defold.com