What’s new in Kontra.js v7

Steven Lambert
Aug 28 · 3 min read

Kontra.js v7 was released a few weeks ago. With it brings a host of new functionality and components as well as a new way to reduce the overall file size.

For a complete list of changes, see the v7 release notes.

TypeScript Support

One of the new features this release is TypeScript support. I was surprised last year by how many users wanted to use Kontra.js with TypeScript so I made sure to include support for it.

New Functionality

The Sprite component got a few new features this version. The biggest one is group support, allowing you to add children to other Sprites and have them update and render as a single unit. @madmarcel already took it for a test drive and built a sweet scene of a Mega Man style dragon boss where each body part was its own sprite with a single parent.

Image for post
Image for post

Other new Sprite features include opacity and scaling of objects.

The Vector component also got a bunch of new functions dedicated to vector math: angle, distance, dot, length, normalize, scale, and subtract.

Lastly, v7 ships with a new group of helper functions to help with common gamedev needs. Functions include converting between degrees and radians, getting a random integer, and a seeded random number generator.

New Components

The new version introduces four new components to the library that are focused on UI elements: Text, Buttons, Scenes, and Grid.

The Text component makes it simple to draw text to the screen and supports multiline text and RTL languages.

Text on the canvas showing “Hello World! I can even be multiline!” with a newline between the two sentences.
Text on the canvas showing “Hello World! I can even be multiline!” with a newline between the two sentences.

The Button component helps you create an interactive button that work with mouse, touch, or keyboard events. The Button is also accessible and supports screen readers out of the box. With Text and Buttons creating menus and UI should be a lot easier.

A blue button with the text “Click me”
A blue button with the text “Click me”

The Scene component was a highly requested feature and enables organizing a group of objects that will update and render together.

Lastly, and my personal favorite feature, the Grid component makes creating menus super easy. One of the things I despised about creating menus was having to hand place every button and figuring out how to manage updating all that if the UI scale / font size increased. The Grid component automatically handles all that for you which makes creating menus a breeze.

A simple vertical game menu showing 3 text options: Start, Options, and Quit
A simple vertical game menu showing 3 text options: Start, Options, and Quit

Further Size Reduction

Last year I put together a poll of what users wanted out of the library and the number one thing was smaller file size. It was very common for users to remove entire parts of the Sprite component in order to reduce the file size.

Even though the library is written using ES Module Imports, module bundlers such as Rollup or Webpack cannot remove any of the unused functionality of a component. So even if all you wanted from the Sprite component was the ability to draw a rectangle, you would get all the rest of the functionality along with it, bloating the file size.

To support more granular control over the file size, I created rollup-plugin-kontra which allows you to specify which functionality you need and it will safely remove the rest. This should allow you to get the absolute smallest file size possible out of the library.

Steven Lambert

Written by

Web developer, HTML5 game developer, JavaScript enthusiast. Creator of the kontra.js game mirco-library https://github.com/straker/kontra

js13kGames

Js13kGames is a JavaScript coding competition for HTML5 Game Developers. The fun part of the compo is the file size limit set to 13 kilobytes. It runs between August 13th and September 13th, online since 2012.

Steven Lambert

Written by

Web developer, HTML5 game developer, JavaScript enthusiast. Creator of the kontra.js game mirco-library https://github.com/straker/kontra

js13kGames

Js13kGames is a JavaScript coding competition for HTML5 Game Developers. The fun part of the compo is the file size limit set to 13 kilobytes. It runs between August 13th and September 13th, online since 2012.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store