SlideShare a Scribd company logo
1 of 28
iBasket
The story of an HTML5 game

       Iker Jamardo
           Ludei
        2013/01/21
iBasket
Ludei’s first steps in
         gaming


            Main goal
         Develop fun games for
          iOS, Android and the
                 Web.
Ludei’s first steps in
                    gaming
• First games:
  •   Objective-C for iOS
  •   Java for Android
  •   Unity & Flash for the Web
Going cross-platform
Develop a C/C++ framework...




...for iOS and Android.
What about the Web?
Let’s try         ...




...and hope for the best!
was born




         An Open Source JavaScript HTML5
                  Game Engine
Handles scenes, actors, hierarchy, input, screen resolutions, audio, physics,
complex animations, ...
Renders using canvas, CSS or WebGL.
We got pretty excited with
      the results!
What about mobile                               ?
    First try...




                                                    ...disappointing
•    Poor overall performance                       .
•    Some APIs missing or not working
•    Can’t compete with native
    •   Lack of monetization channels (ads, IAPs, ...)
    •   Missing expected services === not a good user experience
So, what can we do now?

First GET ANGRY!
,

Then
,



   drop the project, try to solve the problem.
                  or
was born




Took a plain JSVM and added all the HTML5 APIs we
identified to be necessary to develop a canvas based
   game, plus some specific extension APIs for the
         things that are missing in the standard.
was born
In fact, we added it to our C/C++ native application
     development framework as a new service.
            CAAT and CocoonJS are a
                  perfect match.
Challenges of   game
        development on mobile
Change “the web developer” way of thinking




        Sorry, a mobile device is not a
        desktop computer or a laptop!
Challenges of   game
development on mobile

Smart memory management
Challenges of   game
       development on mobile
Power of two friendly images + texture packing
•Decreases   memory waste
•Decreases   context changes === improves performance




             2048




                             2048
Challenges of   game
    development on mobile

Optimize your JavaScript more than ever
Challenges of   game
        development on mobile
Closures and complex JavaScript hierarchies...




               ...can be EVIL!
Challenges of   game
development on mobile

 Control garbage collection
Challenges of   game
                development on mobile
                                       K!
var image = new Image();


                                     EA
image.src = “PATH_TO_YOUR_IMAGE”;
image.onload = function(e) {
                                    L
     console.log(“Image: “ + image.width + “x” + image.height);
};

                        This ain’t good ;)
var image = new Image();
image.src = “PATH_TO_YOUR_IMAGE”;
image.onload = function(e) {
     console.log(“Image: “ + e.target.width + “x” + e.target.height);
};

                           This is better.
Challenges of   game
             development on mobile
                     Abstraction is key


                          •   from input
                          •   from screen
                              resolution
                          •   from rendering


“be agnostic my friend”
Challenges of   game
   development on mobile

Native features are REALLY important

               •   In-app payments
               •   Advertisement
               •   Push notifications
               •   Social network integration
               •   Analytics
Challenges of   game
                 development on mobile
CocoonJS.Ad.preloadBanner();
CocoonJS.Ad.preloadFullScreen();
CocoonJS.Ad.onBannerShown.addEventListener(function() {
      console.log("onBannerShown");
});
CocoonJS.Ad.onFullScreenShown.addEventListener(function() {
      console.log("onFullScreenShown");
});
CocoonJS.Ad.onFullScreenHidden.addEventListener(function() {
      console.log("onFullScreenHidden");
});
CocoonJS.Ad.setBannerLayout(CocoonJS.Ad.BannerLayout.BOTTOM_CENTER);
CocoonJS.Ad.showBanner();
CocoonJS.Ad.hideBanner();
CocoonJS.Ad.showFullScreen();
Challenges of   game
 development on mobile

Develop and test on mobile FIRST!
So, is   ready for gaming?

Desktop          Mobile




               Using hybrid
  YES           solutions,
                   YES
So, is               ready for gaming?
•   We start to be legion (in 4 months of activity)




    • 2275 registered developers.
    • 1035 ongoing projects
    • 72 games published in Google Play
    • 34 games published in the App Store
But, hey, what do I know! ;)




Judge for yourselves!
We are hiring!




We want you! Contact us at ludei.com

More Related Content

What's hot

What's hot (8)

Adobe: Changing the game
Adobe: Changing the gameAdobe: Changing the game
Adobe: Changing the game
 
Final year project presentation
Final year project presentationFinal year project presentation
Final year project presentation
 
2012, the awakening of the Vietnamese Game Development - Game designer’s job ...
2012, the awakening of the Vietnamese Game Development - Game designer’s job ...2012, the awakening of the Vietnamese Game Development - Game designer’s job ...
2012, the awakening of the Vietnamese Game Development - Game designer’s job ...
 
Game development in android
Game development in androidGame development in android
Game development in android
 
Skills You Need to Be a Video Game Developer
Skills You Need to Be a Video Game DeveloperSkills You Need to Be a Video Game Developer
Skills You Need to Be a Video Game Developer
 
Android Fish Game Development
Android Fish Game Development Android Fish Game Development
Android Fish Game Development
 
Game development challenge
Game development challengeGame development challenge
Game development challenge
 
Maysalward 2010
Maysalward 2010Maysalward 2010
Maysalward 2010
 

Similar to iBasket: The story of an HTML5 game

HTML5 Games Status and issues
HTML5 Games Status and issuesHTML5 Games Status and issues
HTML5 Games Status and issues
J.h. Liu
 
Seattle javascript game development - Overview
Seattle javascript game development - OverviewSeattle javascript game development - Overview
Seattle javascript game development - Overview
Grant Goodale
 
XinNing_Resume
XinNing_ResumeXinNing_Resume
XinNing_Resume
Xin Ning
 
Mono for Game Developers - AltDevConf 2012
Mono for Game Developers - AltDevConf 2012Mono for Game Developers - AltDevConf 2012
Mono for Game Developers - AltDevConf 2012
Xamarin
 

Similar to iBasket: The story of an HTML5 game (20)

Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Metodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en GamingMetodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en Gaming
 
HTML5 Games Status and issues
HTML5 Games Status and issuesHTML5 Games Status and issues
HTML5 Games Status and issues
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
Seattle javascript game development - Overview
Seattle javascript game development - OverviewSeattle javascript game development - Overview
Seattle javascript game development - Overview
 
Gameathon @ Neev
Gameathon @ NeevGameathon @ Neev
Gameathon @ Neev
 
Invokers studios game_prez_v3
Invokers studios game_prez_v3Invokers studios game_prez_v3
Invokers studios game_prez_v3
 
Lecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR ProgrammingLecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR Programming
 
Z Infinity - Games catalog
Z Infinity - Games catalogZ Infinity - Games catalog
Z Infinity - Games catalog
 
HTML5 Game Development frameworks overview
HTML5 Game Development frameworks overviewHTML5 Game Development frameworks overview
HTML5 Game Development frameworks overview
 
multi platform mobile development using titanium
multi platform mobile development using titaniummulti platform mobile development using titanium
multi platform mobile development using titanium
 
Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with Corona
 
XinNing_Resume
XinNing_ResumeXinNing_Resume
XinNing_Resume
 
HTML5 Dev Conf 2013 Presentation
HTML5 Dev Conf 2013 PresentationHTML5 Dev Conf 2013 Presentation
HTML5 Dev Conf 2013 Presentation
 
Full stack development in Go
Full stack development in GoFull stack development in Go
Full stack development in Go
 
AWS Partner Presentation - KANO/APPS - Large Scale HTML5 Games on Desktop, M...
AWS Partner Presentation -  KANO/APPS - Large Scale HTML5 Games on Desktop, M...AWS Partner Presentation -  KANO/APPS - Large Scale HTML5 Games on Desktop, M...
AWS Partner Presentation - KANO/APPS - Large Scale HTML5 Games on Desktop, M...
 
Mono for Game Developers - AltDevConf 2012
Mono for Game Developers - AltDevConf 2012Mono for Game Developers - AltDevConf 2012
Mono for Game Developers - AltDevConf 2012
 
Pc54
Pc54Pc54
Pc54
 
Introduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsIntroduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJs
 
Introduction to CocosSharp
Introduction to CocosSharpIntroduction to CocosSharp
Introduction to CocosSharp
 

Recently uploaded

Recently uploaded (20)

[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

iBasket: The story of an HTML5 game

  • 1. iBasket The story of an HTML5 game Iker Jamardo Ludei 2013/01/21
  • 3. Ludei’s first steps in gaming Main goal Develop fun games for iOS, Android and the Web.
  • 4. Ludei’s first steps in gaming • First games: • Objective-C for iOS • Java for Android • Unity & Flash for the Web
  • 5. Going cross-platform Develop a C/C++ framework... ...for iOS and Android.
  • 7. Let’s try ... ...and hope for the best!
  • 8. was born An Open Source JavaScript HTML5 Game Engine Handles scenes, actors, hierarchy, input, screen resolutions, audio, physics, complex animations, ... Renders using canvas, CSS or WebGL.
  • 9. We got pretty excited with the results!
  • 10. What about mobile ? First try... ...disappointing • Poor overall performance . • Some APIs missing or not working • Can’t compete with native • Lack of monetization channels (ads, IAPs, ...) • Missing expected services === not a good user experience
  • 11. So, what can we do now? First GET ANGRY! , Then , drop the project, try to solve the problem. or
  • 12. was born Took a plain JSVM and added all the HTML5 APIs we identified to be necessary to develop a canvas based game, plus some specific extension APIs for the things that are missing in the standard.
  • 13. was born In fact, we added it to our C/C++ native application development framework as a new service. CAAT and CocoonJS are a perfect match.
  • 14. Challenges of game development on mobile Change “the web developer” way of thinking Sorry, a mobile device is not a desktop computer or a laptop!
  • 15. Challenges of game development on mobile Smart memory management
  • 16. Challenges of game development on mobile Power of two friendly images + texture packing •Decreases memory waste •Decreases context changes === improves performance 2048 2048
  • 17. Challenges of game development on mobile Optimize your JavaScript more than ever
  • 18. Challenges of game development on mobile Closures and complex JavaScript hierarchies... ...can be EVIL!
  • 19. Challenges of game development on mobile Control garbage collection
  • 20. Challenges of game development on mobile K! var image = new Image(); EA image.src = “PATH_TO_YOUR_IMAGE”; image.onload = function(e) { L console.log(“Image: “ + image.width + “x” + image.height); }; This ain’t good ;) var image = new Image(); image.src = “PATH_TO_YOUR_IMAGE”; image.onload = function(e) { console.log(“Image: “ + e.target.width + “x” + e.target.height); }; This is better.
  • 21. Challenges of game development on mobile Abstraction is key • from input • from screen resolution • from rendering “be agnostic my friend”
  • 22. Challenges of game development on mobile Native features are REALLY important • In-app payments • Advertisement • Push notifications • Social network integration • Analytics
  • 23. Challenges of game development on mobile CocoonJS.Ad.preloadBanner(); CocoonJS.Ad.preloadFullScreen(); CocoonJS.Ad.onBannerShown.addEventListener(function() { console.log("onBannerShown"); }); CocoonJS.Ad.onFullScreenShown.addEventListener(function() { console.log("onFullScreenShown"); }); CocoonJS.Ad.onFullScreenHidden.addEventListener(function() { console.log("onFullScreenHidden"); }); CocoonJS.Ad.setBannerLayout(CocoonJS.Ad.BannerLayout.BOTTOM_CENTER); CocoonJS.Ad.showBanner(); CocoonJS.Ad.hideBanner(); CocoonJS.Ad.showFullScreen();
  • 24. Challenges of game development on mobile Develop and test on mobile FIRST!
  • 25. So, is ready for gaming? Desktop Mobile Using hybrid YES solutions, YES
  • 26. So, is ready for gaming? • We start to be legion (in 4 months of activity) • 2275 registered developers. • 1035 ongoing projects • 72 games published in Google Play • 34 games published in the App Store
  • 27. But, hey, what do I know! ;) Judge for yourselves!
  • 28. We are hiring! We want you! Contact us at ludei.com