enter image description hereI am making my own army fighting simulator. Designer have made an 3D model with Blender and textured it, made animations. I have made sprites from that model and did programming. But the result is not as good as I expected. You can look at armyfight.com/simulator.html (refresh until it loads all images properly if it didn't at first time) and when you maximally maximize, you can see there are units moving. But I want to be them clearly visible, with details, high resolution like in flash-games and also that when they are really small units, would be understandable.

Is it possible on canvas?

Or it is my mistake and I must do somehow more HD sprites? I'm stuck now, and I don't know to improve the graphics..

enter image description here

  • 1
    \$\begingroup\$ Could you upload some screenshots or something, we have no way to help you now as we don't see anything. (Please don't link to an external resource, and please edit the post.) \$\endgroup\$ – Vaillancourt Apr 12 '16 at 19:55
  • \$\begingroup\$ Added a screenshot. Seeing on it, it is hard to see an unit there, some blurred or so, bad graphics. Is it possible somehow to make much cleaner grapics? \$\endgroup\$ – mansim Apr 12 '16 at 20:44
  • 1
    \$\begingroup\$ Depends on your base graphics... maybe you could upload the base texture as well? \$\endgroup\$ – Vaillancourt Apr 12 '16 at 20:46
  • \$\begingroup\$ I added the sprite from closer. But on HTML5 canvas it minimizes a lot and grapics so much reduces. \$\endgroup\$ – mansim Apr 13 '16 at 4:53
  • \$\begingroup\$ Tried making it bigger? Hiw big is the original texture. \$\endgroup\$ – Bálint Apr 13 '16 at 5:51

Just draw them larger. Also don't hesitate to have the sprites overlap vertically. The sprites are rendered from a 45° angle, so it is just natural that the soldiers in the front-row overlap the lower bodies of the soldiers in the row behind them. All you need to keep in mind in that case is that you need to draw them in the correct order from back to front.

The scale of the drawn image is controlled by the last two arguments to the function context2d.drawImage. Make them equal to the 4th and 5th argument to keep source-resolution and target-resolution the same. In your case you are controlling these with the variable 'unit_width'.

Another thing which can affect the scale of images (in fact the scale of the whole canvas) is the global transform setting of the canvas context , which can be changed with context2d.transform, context2d.SetTransform or context2d.scale. There is a huge blob of minified Javascript code in the beginning of your sourcecode which includes the string "transform" a few times, so it might also affect the scaling of the canvas somehow.

  • \$\begingroup\$ Yes, larger and overlapping vertically looks really much better. Going to improve it with source-resolution. Maybe have any idea how/where should i make my big images (from blender generated) to clearly seen really small images? I mean how to make the picture 100 times smaller and keep really good resolution, i need some tutorial or program. because i am new to gimp2, did sprites with it, but at small images resolution is really bad. \$\endgroup\$ – mansim Apr 14 '16 at 9:38
  • \$\begingroup\$ @mansim When you want to downscale a graphic but retain the detail, then just scaling it automatically often won't do. Many games exaggerate the proportions when using very small sprites. \$\endgroup\$ – Philipp Apr 14 '16 at 10:48

In addition to Philipp's answer:

Typically, you'll try to minimize the scaling done to your images, as the renderer may not be doing a good job in pixel interpolation/stretching.

So what you can do is have multiple size images for your character, that you do yourself offline: you'll see the result right away and you'll be able to either improve the image in Photoshop or ask your artist to do it.

Then, depending on the zoom level, you change the texture that is used to match as much as possible the size of the sprite on the screen.

This is called mipmaping.

When designing a game, you can't think of a single item at a time, you have to plan ahead and make sure everything fits together. Making fine details to you character may be looking good when up close, but when scaled really tiny, you lose the details, for instance, the sword gets barely visible. If the intention is to display a model both up-close and very tiny, instead of starting your graphics design from the up-close detailed view, then scaling it down, you could go the other way around: start from the tiny view, and make sure all of the main features of your soldiers are distinguishable. For instance, if the sword looks really like noting, how about an axe instead? Then as you detail the bigger images/LoD, you can add more details to it.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.