svg vs canvas - 浏览器游戏地图?
svg vs canvas - browser game map?
我正在尝试复制流行的网页游戏 Travian.com。我目前正在制作地图,我能够获得农场概览图像 png
。
我想用这张地图完成的是:
- 每个元素(农场)都应该是可点击的)并重定向到该特定的农场页面。
- 正如您在地图上看到的那样,农场不仅仅是简单的方块。
获得 farms.png 图片后,我使用在线工具将 png
转换为 .svg
文件。使用免费软件,我能够在每张地图周围画圈来构建我的 svg
.
这是结果:
我最近读到有关 canvas 的信息,我想知道 canvas 是否比使用 svg
更好?
您需要自己尝试一下,看看重绘速度是否足够快,游戏对您的响应是否足够快。如果地图非常详细,重绘可能会太慢,让你的游戏感觉很慢。你真的需要试试看。如果它对您来说太慢,那么您可能需要:
- 使用位图图像,或
- 将地图保留为 SVG,但在首次加载时将它们渲染为
Canvas
。这样,无论用户使用何种分辨率的屏幕,它们都会很清晰。
我正在尝试复制流行的网页游戏 Travian.com。我目前正在制作地图,我能够获得农场概览图像 png
。
我想用这张地图完成的是:
- 每个元素(农场)都应该是可点击的)并重定向到该特定的农场页面。
- 正如您在地图上看到的那样,农场不仅仅是简单的方块。
获得 farms.png 图片后,我使用在线工具将 png
转换为 .svg
文件。使用免费软件,我能够在每张地图周围画圈来构建我的 svg
.
这是结果:
我最近读到有关 canvas 的信息,我想知道 canvas 是否比使用 svg
更好?
您需要自己尝试一下,看看重绘速度是否足够快,游戏对您的响应是否足够快。如果地图非常详细,重绘可能会太慢,让你的游戏感觉很慢。你真的需要试试看。如果它对您来说太慢,那么您可能需要:
- 使用位图图像,或
- 将地图保留为 SVG,但在首次加载时将它们渲染为
Canvas
。这样,无论用户使用何种分辨率的屏幕,它们都会很清晰。