Abstract
If you’re writing a 2D game in HTML5, chances are that you’ll want the user to have the ability to pick an object on the screen. More specifically, at some point, the user will need to select some item on the screen, or in your game, which may represent part of the world. We call this “picking” as the user is selecting what object they are interacting with. Consider, for instance, your standard social time-management game. The user is presented with a 2.5D play area where bitmaps (or “sprites”) are rendered with some perspective distortion on the screen. For the more advanced users, you can quickly saturate the play area with these sprites, often stacking many of them together, only leaving a few pixels visible between overlapping objects. In this environment, determining the picking result of a mouse click is quite difficult. The canvas API doesn’t provide any form of pixel-based selection and the large number of objects makes it difficult to brute-force the technique. This section will cover how to address performance and accuracy problems in canvas picking using a few old-school techniques that most of us have forgotten about.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
Author information
Authors and Affiliations
Rights and permissions
Copyright information
© 2014 Colt McAnlis
About this chapter
Cite this chapter
McAnlis, C. et al. (2014). Faster Canvas Picking. In: HTML5 Game Development Insights. Apress, Berkeley, CA. https://doi.org/10.1007/978-1-4302-6698-3_5
Download citation
DOI: https://doi.org/10.1007/978-1-4302-6698-3_5
Published:
Publisher Name: Apress, Berkeley, CA
Print ISBN: 978-1-4302-6697-6
Online ISBN: 978-1-4302-6698-3
eBook Packages: Professional and Applied ComputingProfessional and Applied Computing (R0)Apress Access Books