Uploading Interactive Html5 App to My Website

Optimize your web apps for Interactive Canvass

Using Interactive Canvas to create an Action for the Google Assistant combines the best of conversational interfaces with the rich visual capabilities of HTML.

We've been using Interactive Canvas for a while, experimenting with various ideas and working with partners to launch their Deportment. Forth the way, nosotros've learned some lessons about what works well, and we'll pass these on in this mail to help you create a successful Action using Interactive Canvass.

Note: At this time, Google is only approval Canvas Actions that are gaming experiences.

Blueprint

Actions using Interactive Sail are conversational Actions. You should start designing your game past thinking well-nigh how a voice user interface can be complemented with visuals using Interactive Canvas. Check out our design guidelines as a starting point for designing your Action chat.

For Actions using Interactive Canvas, we recommend that you create storyboards to embrace all of the main stages of your game, such as the loading screen, the welcome and tutorial screens, the chief gaming screens, and the cease screen.

Since the user can also touch the screen when playing the game, consider how you'll provide feedback for these touch events. We recommend that you lot provide an immediate confirmation within the web app and not wait for the callback response for the user input.

You should also be aware of the diverse restrictions on Interactive Canvas web apps, like no local storage and staying under the 200MB retention limit.

Once you have determined the visual elements, GUI components, and animation for your Activity, select the best technical implementation for the devices that back up Interactive Canvas. In the side by side sections, we recommend various HTML technologies that piece of work well with Interactive Canvas on all the supported devices to create experiences like this demo Action we have been playing with:

Interactive Canvas Activity

Loading folio

We recommend using a loading folio to expect for the web page to load completely earlier showing any of your main animations. This will make a noticeable difference to the performance of the animations and avoid any potential layout bug as the page assets are loading.

While the loading page is being displayed, JavaScript logic tin be used to asynchronously load any assets similar image files and textures.

The simplest manner to pattern a loading page is to have a solid background and display an animated loading indicator. Here, you desire to avert using JavaScript to drive the blitheness, so using either CSS or an animated GIF is platonic. Take a await at these cool CSS loaders for ideas for your loading page.

Responsive design

Currently, Interactive Canvas is supported on Google Assistant Smart Displays and on Android mobile devices. These devices have dissimilar screen resolutions and can also support both landscape and portrait modes.

Your web app should use a responsive pattern to ensure that the layout and text is appropriately sized for each kind of display. A simple way to exercise this is to use Sass breakpoints:

          @mixin for-minor-display-mural {
            @media screen and (min-width: 1024px) and (min-height: 600px) {
            @content;
            }
}          @mixin for-medium-display-landscape {
            @media screen and (min-width: 1280px) and (min-height: 700px) {
            @content;
            }
}        

Also, Deportment have a header at the top of the screen that displays the Activeness name, icon and provides a way for the user to shut the activity. Y'all shouldn't place any of import content or text behind the header.

Interactive Canvass provides a getHeaderHeightPx() API that asynchronously determines the header superlative in pixels. Your web app tin use this value to dynamically suit the layout when the web app is loaded:

          window.onload = () => {
            const callbacks = {
            onUpdate(data) {
            // update game land based on intent response data
            },
            }
            interactiveCanvas.ready(callbacks)          interactiveCanvas.getHeaderHeightPx().then((height) => {
            // initialize web app layout with header height value
            })
}        

Animation

HTML provides a rich set of options to do animation, from manipulating the DOM to CSS animations, HTML canvas, and WebGL.

In our experience, animation that relies on mostly real-time JavaScript calculations tends to crave more than optimizations. All the same, there are other options to consider that provide smooth and high FPS.

CSS

Rather than relying on JavaScript to manipulate the DOM, consider using CSS animations. The browser can use the GPU to advance these kinds of animations and manage them separately from the principal UI thread.

If you don't want to utilize the low-level CSS properties, there are CSS libraries like animate.css, which provide CSS classes for a large drove of loftier-quality animations. To use these animations, first declare your elements with the necessary CSS animation properties:

          .title {
            animation-duration: 3s;
            animation-delay: 2s;
            animation-iteration-count: space;
}        

The animation classes can so be declared statically with the HTML elements or dynamically triggered via JavaScript:

          const element = certificate.querySelector('.title');
element.classList.add together('blithe', 'bounceInUp');
chemical element.mode.visibility = 'visible';
element.addEventListener('animationend', () => {
            chemical element.mode.visibility = 'hidden';
});        

We recommend that you avert simultaneous animations and rather use a sequence of animations that are triggered by the terminate issue of the previous animation.

You tin can likewise consider using the Spider web Animations API, which combines the operation of the CSS optimization with the dynamic capabilities of JavaScript.

SVG

SVG allows developers to create ii-dimensional vector graphics that can be dynamically manipulated using either JavaScript or CSS.

SVG supports an <animate> tag that can be used to animate an attribute of an element over time. The results on Canvas devices are quite practiced for basic animations.

However, you lot tin do fifty-fifty better by using CSS to breathing SVG graphical elements. The SVG <paths> are assigned classes that are then animated using the CSS animations. These animations are rendered smoothly on devices.

WebGL

WebGL uses the device GPU to significantly meliorate the operation of animations on spider web pages. If y'all practice not have feel with WebGL, there are many libraries, similar PixiJS, that provide easy, loftier-level JavaScript APIs for designing animations that are and then rendered using WebGL.

For animators who are familiar with tools like Adobe Animate, the PixiAnimate extension allows content to be exported that can then exist played past the PixiJS runtime library. In the Canvas web app, the Pixi Animate plugin is used to load the exported animation. JavaScript code can then control the animation and even make dynamic changes to the visuals, like changing the colors of shapes.

We recommend avoiding "Shape Tween" in Adobe Animate since that generates many textures that can run over the memory limit for Canvas web apps. Instead, use "Archetype Tweens".

WebAssembly

WebAssembly (WASM) is an interesting option for developers who have existing code in other languages. For example, you can take your existing game in C or C++ and apply a toolchain like Emscripten to compile it to WebAssembly. The Sail web app can load and instantiate the WASM code. JavaScript logic can then phone call the WASM functions.

WebAssembly provides developers with depression-level control coupled with high-level performance. Nosotros've experimented with compiling Rust to WASM to avoid garbage collection and attain super-smooth animations at 60FPS.

Using WASM allows the all-time of both worlds: you can employ HTML for fast text rendering and also displaying static elements, then overlay these on the WASM animations.

Video

Using video assets in a game tin can be an effective way to display high-production visuals and create engaging experiences such as cutscenes.

For visuals that might be too taxing to generate "on the fly", consider pre-rendering the animations equally a video and then using the HTML media element to play video in the spider web app. This tin be a very effective way to provide rich backgrounds, which are then combined with dynamic DOM elements and animations.

For Sheet, simply one active media element is immune and the video element cannot exist styled with CSS.

For long-running effects, the video tin be looped by specifying the "loop" attribute for the media element. Even so, auto looping can introduce a delay between the end of the loop and the beginning of the next loop.

To make the transition seamless requires using the Media Source Extensions (MSE), which extends the media chemical element to allow JavaScript to generate media streams for playback. MSE allows for segments of media to be handed directly to the HTML5 video tag'due south buffer. JavaScript lawmaking is needed to download and buffer the video information to ensure that the video will keep looping forever and there won't be whatever delays between each loop.

Update: Read the postal service on how employ video loops .

Land management

The spider web app can utilise the Interactive Canvas sendTextQuery() API to invoke an intent in the Dialogflow agent and synchronize its country with the fulfillment logic. This invocation follows the same life-cycle equally a user's vocal response and tin add some delays to any backend persistence.

If the timing of persisting any land updates to the backend is time-sensitive, and then the web app can invoke any persistence APIs, like Cloud Firestore, directly from its forepart-end JavaScript logic.

Testing

We recommend using Chrome DevTools to contour your web app performance and retentiveness usage. When you exam your Action in the desktop simulator, detect the iframe that is used to embed the web app then use the DevTools to inspect the web app DOM.

Nosotros've found DevTools useful for profiling the memory and CPU usage. This allows y'all to detect whatsoever bottlenecks in your code and improve the FPS of your animations.

We also recommend using stats.js to display an overlay on your game that tracks the real-time FPS.

Once y'all are happy with the performance, brand certain you exam your Action on all the devices supported by Interactive Sail since the screen ratios vary and the device performances differ.

Next steps

Depending on the kind of game yous are developing with Interactive Sheet, yous take a range of choices to create smooth animations and effects. It does require some testing and profiling, but y'all can attain delightful, immersive experiences for your Interactive Sail games.

Information technology'due south all the same early days for games using Interactive Sail, so accept this opportunity to kick the tires and experiment with what is possible using the ability of HTML.

Read our previous post on Interactive Canvas.

To share your thoughts or questions, join us on Reddit at /r/GoogleAssistantDev . Follow @ActionsOnGoogle on Twitter for more than of our team'due south updates, and tweet using #AoGDevs to share what you're working on.

whitehisdon.blogspot.com

Source: https://medium.com/google-developers/optimize-your-web-apps-for-interactive-canvas-18f8645f8382

Share this post