0

I'm working on my first HTML5 mobile game and I'm using a pixel art style for the images.

I don't know if I'm doing this right... initially I was going to create the pixel art images in a much large size, so that I could resize them later according to the device's screen. But now I saw this method where I can draw the pixel art using actual pixels and resize them in the browser.

I did a little research and found that in order to stretch pixel art images without losing their quality, I would need to draw them into a html canvas and disable the image smoothing. I managed to build an image loader in JavaScript for all my images, and loaded them all into a canvas, resized them... no problem.

But now, how am I supposed to work with those images? They're not elements as far as I understand... I can't assign classes or ids to them.

Am I supposed to create a canvas for each image? Am I doing this right?

Makoto
  • 104,088
  • 27
  • 192
  • 230
DanielFox
  • 675
  • 2
  • 9
  • 18

2 Answers2

0

The canvas has its own rules. Elements inside a it are not controlled like normal HTML elements. Look up the canvas API and if it doesn't suit your needs just work with images in normal HTML setting.

Jencel
  • 722
  • 7
  • 17
  • Have you ever worked in a HTML5 Pixel Art game? Which method is better? If I do all my images using normal pixel size in order to use the canvas and find out later that this method isn't good, I will have to redo all my images in a larger size. – DanielFox Oct 22 '14 at 20:40
  • Experiment with the API and see if it suits your needs. There are also a lot of frameworks that can help you. – Jencel Oct 22 '14 at 20:47
0

Disable antialising when scaling images

Not sure about using the HTML Canvas but you could try the CSS settings in that link to disable the anti-aliasing of the images in your page.

Community
  • 1
  • 1
Zack
  • 580
  • 5
  • 16
  • Doesn't work in Chrome, but it's a good solution overall. However I'm still curious about the whole canvas vs not canvas thing. – DanielFox Oct 23 '14 at 14:04
  • I haven't ever used an HTML canvas personally, but it seems like you could potentially map out the images in the canvas with coordinates and dimensions, and access them that way... assuming I read your original post right and you have multiple images being docked in one canvas. – Zack Oct 23 '14 at 14:24