如何提高我的HTML5canvas上的graphics?

在这里输入图像说明 我正在制作自己的军队模拟器。 devise师使用Blender制作了一个3D模型,并将其制成animation。 我已经从这个模型做了精灵,并做了编程。 但结果并不如我预期的那么好。 你可以看看armyfight.com/simulator.html(刷新,直到它加载所有图像,如果它没有在第一次),当你最大化最大化,你可以看到有单位移动。 但是我想成为他们清晰可见的细节,像Flash游戏中的高分辨率,而且当他们真的是小单位的时候,也是可以理解的。

在canvas上可以吗?

或者这是我的错误,我必须做更多的高清精灵? 我现在卡住了,我不知道要改善graphics..

在这里输入图像说明

只要把它们拉大一些。 也不要犹豫,让精灵垂直重叠。 精灵是从45度的角度渲染的,所以前排的士兵与他们身后的那排士兵的下半身重叠是很自然的。 在这种情况下,所有你需要记住的是,你需要从正面顺序以正确的顺序绘制它们。

绘制图像的比例由函数context2d.drawImage的最后两个参数控制。 使它们等于第四和第五个参数来保持源parsing和目标parsing是相同的。 在你的情况下,你正在用variables'unit_width'来控制它们。

另一个可能影响图像比例的事情(实际上是整个canvas的比例)是canvas上下文的全局变换设置,可以通过context2d.transformcontext2d.SetTransformcontext2d.scale来更改。 在你的源代码开始处有一大段缩小的Javascript代码,其中包括string“transform”几次,所以它也可能以某种方式影响canvas的缩放比例。

除了Philipp的回答:

通常情况下,您将尝试最大限度地缩小对图像的缩放比例,因为渲染器在像素插值/拉伸中可能不会很好。

所以你可以做的是为你的角色提供多种尺寸的图像,你可以自己离线:你会马上看到结果,你可以改进Photoshop中的图像,或者让你的艺术家去做。

然后,根据缩放级别,更改用于尽可能匹配屏幕上精灵大小的纹理。

这就是所谓的mipmaping。

在devise游戏时,你不能一次只考虑一件事情,你必须提前计划,确保一切合适。 当你近距离的时候,对你的角色制作细节可能看起来不错,但是当缩小的时候,你会失去细节,比如剑就几乎看不见。 如果目的是要显示一个既接近又非常小的模型,而不是从近距离详细视图开始你的graphicsdevise,然后缩小它,你可以反过来:从小视角开始,确保你的士兵的所有主要特点是可区分的。 例如,如果剑看起来真的很像,那斧头呢? 然后,当你详细的更大的图像/ LoD,你可以添加更多的细节。