The document discusses building HTML5 games and provides resources on graphics libraries, physics engines, handling touch input, and gaming frameworks. It recommends libraries like EaselJS and frameworks like MelonJS and ImpactJS for HTML5 game development. Tutorials are presented on porting games to HTML5 using these tools as well as considerations for building games targeting multiple platforms like Windows 8.
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor.
This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript.
We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers.
You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.
A quick overview on Node.js to see how Javascript is changing server programming : brief history & motivations, what makes NodeJS so special/popular/difficult, typical use cases, and a few popular tools around the NodeJs world : npm, Grunt, IISNode, Tools for Visual Studio, …
Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-EntwicklungAndreas Wissel
Schick, performant und bitte auf allen Plattformen verfügbar! Moderne Anwendungen verlangen ihren Entwicklern einiges ab. Wo früher noch Platzhirsche wie Windows Forms und WPF mit ausgiebigen UI-Baukästen aufwarteten, muss heute selbst Hand angelegt werden. Damit das auch in Zeiten von agiler Entwicklung funktioniert, ohne sich im Detail zu verlieren, bedarf es eines robusten Workflows. Andreas Wissel zeigt Ihnen in dieser Session, wie Sie mit Angular und Storybook eine pragmatische, skalierbare Komponentenbibliothek aufbauen, die den Vorbildern großer Anbieter in nichts nachsteht. Sowohl isolierte Entwicklung als auch Testing und Dokumentation sind damit fester Bestandteil Ihres Workflows!
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...FELGO SDK
*** NOTE ***
A summarized version is available here:
http://v-play.net/2014/11/supporting-multiple-screen-sizes-and-screen-densities-with-qt-and-v-play
*** Quick Summary ***
In the first part, we show how to use Qt Quick features to create UIs for multiple screen sizes, screen resolutions and form factors like phones, tablets and desktop PCs. We cover dynamic image switching, content scaling and basic Qt Quick features like file selectors, Loader elements, QML Singletons and property bindings and compare the use cases for each of them.
We also cover how to implement adaptive layouts and responsive design in Qt and V-Play. Plus, how to create density independence and HighDPI / Retina screen support.
The second part shows:
•How to increase user engagement with user-generated content and how to build a community around your app or game.
• How gamification can be added to apps or games in just a few minutes and its benefits.
*** Presentation Keywords ***
Qt, Qt Quick, QML, JavaScript, V-Play Game Engine, V-Play Qt 5 Plugins
Screen density, screen resolution, screen size
Density independence, density-independent pixels; pixel density
Dynamic image switching, dynamic image selection; Android: alternative bitmaps; retina display, retina images
High dpi screens
Multiple screen aspect ratios
Supporting Multiple Screens, Responsive Design (tablet layout, adaptive layout, adaptable layout, scalability)
Multiple resolutions
Content scaling, upscaling, adaptive scaling
User Retention, User-Generated Content, UGC, community building, V-Play Game Network, Gamification
Qt 5 Plugins, V-Play Plugins, Qt Facebook Plugin, Qt Chartboost, Qt AdMob, Qt Flurry Analytics, Qt Push Notifications, Qt In-App Purchases
Build content centric apps with eclipse and nuxeo - ny java-sig november 2011Nuxeo
Nuxeo's Olivier Grisel (R&D Software Engineer) and Roland Benedetti (VP of Products & Marketing) provide an Introduction to the Eclipse Apricot Project and the Nuxeo Platform at the NYC Java User Group in November 2011.
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor.
This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript.
We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers.
You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.
A quick overview on Node.js to see how Javascript is changing server programming : brief history & motivations, what makes NodeJS so special/popular/difficult, typical use cases, and a few popular tools around the NodeJs world : npm, Grunt, IISNode, Tools for Visual Studio, …
Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-EntwicklungAndreas Wissel
Schick, performant und bitte auf allen Plattformen verfügbar! Moderne Anwendungen verlangen ihren Entwicklern einiges ab. Wo früher noch Platzhirsche wie Windows Forms und WPF mit ausgiebigen UI-Baukästen aufwarteten, muss heute selbst Hand angelegt werden. Damit das auch in Zeiten von agiler Entwicklung funktioniert, ohne sich im Detail zu verlieren, bedarf es eines robusten Workflows. Andreas Wissel zeigt Ihnen in dieser Session, wie Sie mit Angular und Storybook eine pragmatische, skalierbare Komponentenbibliothek aufbauen, die den Vorbildern großer Anbieter in nichts nachsteht. Sowohl isolierte Entwicklung als auch Testing und Dokumentation sind damit fester Bestandteil Ihres Workflows!
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...FELGO SDK
*** NOTE ***
A summarized version is available here:
http://v-play.net/2014/11/supporting-multiple-screen-sizes-and-screen-densities-with-qt-and-v-play
*** Quick Summary ***
In the first part, we show how to use Qt Quick features to create UIs for multiple screen sizes, screen resolutions and form factors like phones, tablets and desktop PCs. We cover dynamic image switching, content scaling and basic Qt Quick features like file selectors, Loader elements, QML Singletons and property bindings and compare the use cases for each of them.
We also cover how to implement adaptive layouts and responsive design in Qt and V-Play. Plus, how to create density independence and HighDPI / Retina screen support.
The second part shows:
•How to increase user engagement with user-generated content and how to build a community around your app or game.
• How gamification can be added to apps or games in just a few minutes and its benefits.
*** Presentation Keywords ***
Qt, Qt Quick, QML, JavaScript, V-Play Game Engine, V-Play Qt 5 Plugins
Screen density, screen resolution, screen size
Density independence, density-independent pixels; pixel density
Dynamic image switching, dynamic image selection; Android: alternative bitmaps; retina display, retina images
High dpi screens
Multiple screen aspect ratios
Supporting Multiple Screens, Responsive Design (tablet layout, adaptive layout, adaptable layout, scalability)
Multiple resolutions
Content scaling, upscaling, adaptive scaling
User Retention, User-Generated Content, UGC, community building, V-Play Game Network, Gamification
Qt 5 Plugins, V-Play Plugins, Qt Facebook Plugin, Qt Chartboost, Qt AdMob, Qt Flurry Analytics, Qt Push Notifications, Qt In-App Purchases
Build content centric apps with eclipse and nuxeo - ny java-sig november 2011Nuxeo
Nuxeo's Olivier Grisel (R&D Software Engineer) and Roland Benedetti (VP of Products & Marketing) provide an Introduction to the Eclipse Apricot Project and the Nuxeo Platform at the NYC Java User Group in November 2011.
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin
Do you want to build native mobile apps for iOS and Android? Are you a web developer? Then NativeScript is the perfect framework for you. NativeScript is an open source framework for creating native mobile apps using the skills of the web developer: JavaScript, CSS and simple tag-based markup. Create rich, high-performance iOS and Android apps with 100% native UI using many of the skills you already have.
Topics covered include:
NativeScript framework core concepts and getting started
Accessing native device capabilities with JavaScript
Building native mobile apps with Angular 2
Common app patterns (login, settings, data bound list and more)
Styling NativeScript with CSS
Targeting specific devices and screens
Debugging and deploying to devices
There has never been a better (and easier) way for web developers to create native mobile apps.
Radu vunvulea building and testing windows 8 metro style applications using ...Radu Vunvulea
In this session you will discover how you can develop applications that use components written in different programming language (C++, C# and JavaScript). A brief introduction in WinRT Components and testing tools will also be presented.
Write retrogames in the web and add something more with AzureMarco Parenzan
Mi piacciono i retrogames, sin da quando ho iniziato a usare i computer con il mio amato Commodore 64 negli anni ottanta. Così nel mio (poco) tempo libero cerco di reimplementare, non come sviluppatore professionista, i giochi più semplici e coinvolgenti con cui ho giocato, portandoli sul web con JavaScript e Phaser.io. Quindi voglio condividere la mia esperienza.
Poi, dato che lavoro con Azure e i giochi diventano delle Web App, cerco di evolvere i giochi aggiungendo alcune nuove e moderne funzionalità, così per sperimentare un po' i vari servizi di Azure, soprattutto quelli che normalmente uso meno.
In this talk, I'd go through the Evolution of JavaScript build tools, their features of most javascript build tools and what we should be expecting in the future from build tools.
This presentation was given at the jQuery conference 2010 in Mountain View and featured the first public premiere of a sneak peek video of our upcoming JavaScript game engine.
The video preview can be found here: http://youtu.be/Ol3qQ4CEUTo
Enjoy and follow me at @pbakaus on Twitter!
The next generation of GPU APIs for Game EnginesPooya Eimandar
Demonstrate about new pipeline of GPU APIs for developing real time game engine.
Developing for DirectX12, Vulkan or Metal requires a redesign of the game engine. Developers can achieve key benefits like reduced power consumption and optimized CPU and GPU, multi-threading on multiple GPU devices.
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...DevClub_lv
Building photorealistic 3D experiences on the Web is a challenge. Making it with React is even harder but once you got there it pays off in many ways. This talk is about Evolution Gaming approach of working with 3D graphics on the Web using ReactJS with the goal to build the most sophisticated and expensive WebGL application ever created.
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJSFestUA
Создать фотореалистичное 3D приложение для Web не просто. Сделать это с React еще сложнее, но окупается с лихвой если вы все таки справились. Этот доклад о том как Evolution Gaming использует WebGL и ReactJS для создания самого сложного и дорогого WebGL приложения из когда либо разработанных.
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin
Do you want to build native mobile apps for iOS and Android? Are you a web developer? Then NativeScript is the perfect framework for you. NativeScript is an open source framework for creating native mobile apps using the skills of the web developer: JavaScript, CSS and simple tag-based markup. Create rich, high-performance iOS and Android apps with 100% native UI using many of the skills you already have.
Topics covered include:
NativeScript framework core concepts and getting started
Accessing native device capabilities with JavaScript
Building native mobile apps with Angular 2
Common app patterns (login, settings, data bound list and more)
Styling NativeScript with CSS
Targeting specific devices and screens
Debugging and deploying to devices
There has never been a better (and easier) way for web developers to create native mobile apps.
Radu vunvulea building and testing windows 8 metro style applications using ...Radu Vunvulea
In this session you will discover how you can develop applications that use components written in different programming language (C++, C# and JavaScript). A brief introduction in WinRT Components and testing tools will also be presented.
Write retrogames in the web and add something more with AzureMarco Parenzan
Mi piacciono i retrogames, sin da quando ho iniziato a usare i computer con il mio amato Commodore 64 negli anni ottanta. Così nel mio (poco) tempo libero cerco di reimplementare, non come sviluppatore professionista, i giochi più semplici e coinvolgenti con cui ho giocato, portandoli sul web con JavaScript e Phaser.io. Quindi voglio condividere la mia esperienza.
Poi, dato che lavoro con Azure e i giochi diventano delle Web App, cerco di evolvere i giochi aggiungendo alcune nuove e moderne funzionalità, così per sperimentare un po' i vari servizi di Azure, soprattutto quelli che normalmente uso meno.
In this talk, I'd go through the Evolution of JavaScript build tools, their features of most javascript build tools and what we should be expecting in the future from build tools.
This presentation was given at the jQuery conference 2010 in Mountain View and featured the first public premiere of a sneak peek video of our upcoming JavaScript game engine.
The video preview can be found here: http://youtu.be/Ol3qQ4CEUTo
Enjoy and follow me at @pbakaus on Twitter!
The next generation of GPU APIs for Game EnginesPooya Eimandar
Demonstrate about new pipeline of GPU APIs for developing real time game engine.
Developing for DirectX12, Vulkan or Metal requires a redesign of the game engine. Developers can achieve key benefits like reduced power consumption and optimized CPU and GPU, multi-threading on multiple GPU devices.
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...DevClub_lv
Building photorealistic 3D experiences on the Web is a challenge. Making it with React is even harder but once you got there it pays off in many ways. This talk is about Evolution Gaming approach of working with 3D graphics on the Web using ReactJS with the goal to build the most sophisticated and expensive WebGL application ever created.
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJSFestUA
Создать фотореалистичное 3D приложение для Web не просто. Сделать это с React еще сложнее, но окупается с лихвой если вы все таки справились. Этот доклад о том как Evolution Gaming использует WebGL и ReactJS для создания самого сложного и дорогого WebGL приложения из когда либо разработанных.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
The Art of the Pitch: WordPress Relationships and Sales
W3C HTML5 KIG-The complete guide to building html5 games
1. THE COMPLETE GUIDE
TO BUILDING HTML5
GAMES
2013.4.17 동국대학교 이창환
• yich@dongguk.edu
• http://html5gamers.wordpress.com
2. 2
• The Complete Guide to Building HTML5 games
• David Rousset
• A Developer Evangelist at Microsoft, specializing in HTML5 and web
development.
• Blog on MSDN
• Twitter: @davrous
• Links
• http://www.codeproject.com/Articles/485747/The-Complete-Guide-to-Building-
HTML5-games-with-Ca, 2012-10-29
• http://html5center.sourceforge.net/The-Complete-Guide-to-Building-HTML5-games-
with-Canvas-SVG
• This slide
• https://www.slideshare.net/yich/w3c-kigthe-complete-guide-to-building-
html5-games
3. 3
• Why are so many people currently interested in HTML5
Gaming?
• HTML5 to target multi-platforms using the same code
• for desktop machines of course (with IE9/IE10, Firefox, Chrome, Opera
& Safari)
• for iOS & Android tablets & phones and Windows 8
• its future associated millions of tablets & PC
• The modern JavaScript engines performance + the GPU
hardware-accelerated graphics layers
4. 4
• Building HTML5 game
• How to draw nice objects on the screen.
• Patrick Dengler (member of the SVG W3C Working Group): Thoughts
on when to use Canvas and SVG
• David Rousset’s materials
• Overview of HTML5 Graphics with Canvas & SVG
• Video: mp4, WebM
• Source Codes
• Other sessions from MIX11
• Modernizing Your Website: SVG Meets HTML5
• Deep Dive Into HTML5 <canvas>
5. 5
Canvas vs. SVG
• Canvas vs. SVG
• Canvas
• a well-known development model for games developers (low level
drawing APIs)
• hardware-accelerated by most of the recent browsers.
• SVG, and its vectors-based technology
• Better armed to scale across devices without loosing quality.
• ViewBox property of SVG
• Games assets-Scale from 3 to 80'' screens
• Example game using both technologies.
• SVG Racketball & Canvas Racquetball
• Programming Simple Games Using Canvas or SVG
6. 6
Performance of Canvas and SVG
• 1000 small balls on screen
• Using SVG: 1000 balls in SVG
• Using Canvas: 1000 balls in Canvas
• Environment
• Intel i7-3770 with 8GB
• Windows 7 (32bit)
• Chrome 26
7. 7
Performance of Canvas and SVG
• Performance Comparison
• Better for drawing a lot of objects on the screen
• To achieve in video games
8. 8
• Mixing both technologies
• A first layer based on SVG to display the game menus
• A second layer in background using a canvas for the game itself.
• Some attentions to final performance results
• Because the browsers & devices are far from being equals in this
domain.
• Don't forget that the main interest of HTML5 is to target all platforms.
9. 9
• David Catuhe’s little brick breaker
game
• Using this composition principle
• How to write a small game using HTML5
and JavaScript-BrikBrok
• The first layer using SVG for the bricks to
break
• The background with a tunnel effect using
the canvas tag.
• Mimic this concept
• The main game in background (hosting a
plateformer or shoot'em up game, etc.)
instead of the tunnel
• first layer: the menus & configuration options
in SVG.
10. 10
Useful libraries & tools
• Graphics
• Physics Engine
• Handling the multi touch events
• Building connected games
11. 11
Graphics
• Writing the XML nodes of SVG manually or even playing
with the low level APIs of Canvas
• Be fun for a moment but not very productive.
• Useful set of tools & libraries for building parts of HTML5
game.
• Some SVG tools
• InkScape: a free & open source desktop software
• SVG Editor: an online software running directly inside your browser
• Adobe Illustrator: Supports SVG as an export target, expensive.
• Game assets (for menus or controls)
• The Noun Project : free icons library
• Open Clip Art Library: free SVG content
12. 12
Graphics
• Libraries (SVG)
• RaphaelJS: SVG JavaScript library
• Generating dynamic SVG with few lines of code.
• Demo using for instance nonlinear animation functions on SVG elements, animated charts,
etc.
• HighCharts: charting
• To display some players' stats
• Those 2 libraries
• Implement VML fallbacks for IE8 or older versions.
• Target at least IE9 and above.
14. 14
Graphics
• Libraries (3D)
• ThreeJS: the usage of 3D in JavaScript
• Be used to render some hardware-accelerated 3D via WebGL.
• For a rendering inside the 2D canvas element of HTML5.
• "CanvasRenderer examples" section
• Used for instance to build our Galactic demo on the IE Test Drive.
• Build 3D scenes working in all HTML5 browsers.
• Note
• Combine all of these graphics effects with the usage of:
• CSS3 2D & 3D Transforms
• Transitions
• Animations
• To stay focused on Canvas & SVG in this article.
15. 15
Physics Engine
• To do in a game
• Displaying graphics
• The AI (Artificial Intelligence): To bring life to your characters.
• Code that alone and be creative
• The physics & collisions: Box2D JS
• Libraries
• Box2D JS
• with the various samples and you'll be amazed:
• Tutorials series of Seth Ladd
• Box2D orientation for the JavaScript developer
• Used the Web Workers to compute the physics on the several available cores of
your CPU.
• An introduction on Web Workers APIs
• Introduction to the HTML5 Web Workers: the JavaScript multithreading
approach
16. 16
Handling the multi touch events
• Support touch for building a cross-devices game
• 2 existing specifications around Touch Events
• Pointer Events vs. Touch Events
• Getting Touchy About Patents
• Need to write code working fine inside IE10 & Windows 8 as well as with the
implementation coming from the Apple devices.
• Finger Painting: Sample demonstrating a possible pattern to support both kind of
touch events
• Handling Multi-touch and Mouse Input in All Browsers
• Browser Surface: Demo for handling multi-touch inside IE10.
• Need a recent IE10 version and a multitouch hardware running it.
17. 17
Handling the multi touch events
• Pointer.js
• Boris Smus
• The idea
• To consolidate all types of touch (IE10, iOS like, mouse and pen) to simplify
your developer life.
• Generalized input on the cross-device web.
• Current
• A draft
• No support yet the MSPointer* of IE10.
18. 18
Building connected games
• WebSockets
• Build multiplayers games or a connected game to a server
• W3C specification (and the underlying protocol handled by the
IETF)
• To support the widest possible number of users
• Consider a fallback for browsers or devices which weren't supporting
WebSockets yet or were supporting an older deprecated version.
• 2 solutions
• Socket.IO library for Node.js
• SignalR working on top of IIS and ASP.NET
• handle all the browsers & devices with their variety of support levels.
19. 19
Some gaming frameworks
• To build a 2D HTML5 game
• 1 - Handling your sprites: splitting them into a sequence,
animating them, effects, etc.
• 2 - Handling your sounds & music (and this is not something
easy in HTML5!)
• 3 - Loading asynchronously your assets from the web server via
a dedicated loader/assets manager
• 4 - Building a collision engine, a high level logic for your game
objects, etc.
• 2 Way to build a 2d HTML5 game
• Do that starting from scratch
• Test & review what other brilliant developers have already done on
the web.
20. 20
Some gaming frameworks
• The most well-known frameworks for building HTML5 2D
games working inside all browsers:
• MelonJS: A free framework that exposes a lot of useful services.
• Works fine with the Tiled Map Editor tool.
• CraftyJS
• ImpactJS: a high quality well-known framework. It's not free but not
too much expensive.
• EaselJS: Written by an old flash developer.
• Part of the CreateJS suite.
• It's very complete, well documented and… free.
21. 21
Some beginners' tutorials
• Tutorials
• porting an XNA C# game into HTML5/JavaScript thanks to EaselJS.
• HTML5 Gaming: animating sprites in Canvas with EaselJS
• HTML5 Gaming: building the core objects & handling collisions with EaselJS
• HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS
• 3 others articles enhancing/extending the same game:
• Tutorial: how to create HTML5 applications on Windows Phone thanks to PhoneGap
• how to port the same game on Windows Phone thanks to PhoneGap/Cordova.
• the same instructions for your Android or iOS device.
• Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3
• use CSS3 3D Transform, Transitions & Grid Layout to enhance the gaming experience
• Modernizing your HTML5 Canvas games Part 2: Offline API, Drag'n'drop & File API
• enable playing to the game in offline mode.
• create your own levels and drag'n'drop them directly into the game.
23. 23
• Tutorials on the EaselJS
• a lot of simple demo to understand and great tutorials on the EaselJS
website:http://www.createjs.com/#!/EaselJS
• More generic tutorials on :
• HTML5 Game Dev Tutorials
• 10 cool HTML5 games and how to create your own
• 2 more "advanced" articles
• David Catuhe from Microsoft:
• Unleash the power of HTML 5 Canvas for gaming.
• Some optimization: Writing in the "demo scene".
• The tips: Some ideas for HTML5 games.
• Boris Smus from Google
• Improving HTML5 Canvas Performance and it contains ton of good advices.
24. 24
Some interesting online working games & experience feedbacks
• Other cool examples on the web to share.
• Be interesting to analyze how the developers made them.
• Thanks to the magic of the web: right-click & "view source".
• Be probably minified,
• Can still learn a couple of interesting things by looking at the global
architecture of the game.
• Pirates Love Daisies written by Grant Skinner:
• using the EaselJS framework.
25. 25
• Windows 8 note
• Windows 8 in the Windows Store
• Pirates Love Daisies for Windows 8.
• A HTML5 game working fine inside IE9 or IE10, building the
Windows 8 version is almost only doing a simple copy… and
paste
• The game will then directly works inside the Metro experience.
• To make a real good Windows 8 game
• pay attention to the unique Windows 8 experience we're building.
• Designing great games for Windows
27. 27
• The 2 most currently famous HTML5 games
• Angry Bird
• Uses the Box2D library
• Cut The Rope
• a Windows 8 version of it in the Windows Store here: Cut The Rope for
Windows 8
28. 28
• To port into Windows 8.
• 1 - Copy/Paste the Web version into a HTML5 Metro Style App project for
Windows 8
• 2 - Add support for touch
• 3 - Add support for the snapped view and pause the game
• 4 - Build some High Resolution assets (1366x768 & 1920x1080) to propose
the best experience for all the incoming Windows 8 tablets & PC.
• The story around "Cut The Rope“
• a successful game written in Objective-C for the Apple iOS devices.
• Ported into HTML5/Canvas and the developers who made this detail their
feedback in this article: Cut The Rope - Behind the scenes
• Experience feedback: Wooga's HTML5 Adventure
• 40 more or less good HTML5 games
• 40 Addictive Web Games Powered by HTML5 with some other available also
here: HTML5games.com