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

New Functionality

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 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

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.

js13kGames

Js13kGames is a JavaScript coding competition for HTML5…

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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