游戏开发最佳实践：缩放动作和对象的距离

Question

我开始在canvas元素上开发一个基于web的游戏，另外还有create http://www.createjs.com/，用户可以通过跳过障碍物和收集goddies等操作。

我想在智能手机，平板电脑，游戏机和基于浏览器的许多设备上发布它。

现在我想知道什么是使其尽可能响应不同屏幕分辨率的最佳解决方案。

我的第一个目的是定义一个像1000px这样的基本高度，然后根据屏幕高度缩放像“你的游戏角色”这样的对象和像“跳跃高度”这样的动作属性。

我觉得这对于屏幕优化计算和扩展很多只会有点过载。

我现在想的是......可能只设置高度等，并以百分比计算。但是我不知道我是否遇到了问题，也许是在进行更新检测等问题时。

有人知道关于这个主题的最佳实践还是可以给我一些建议？

Answer 1

我在这里可能有点标记，但写了一些文字。

这些天我在画布上摆弄着一些画布。从我在你的问题中看到的，这一切都取决于你的代码。我很容易采取这样的方法：

• 检测可用空间。
• 预动画：
  • 尽可能计算并将预先计算的值保存到对象等。
  • 将背景，动画精灵和其他对象绘制到关闭DOM /内存画布。
• 在动画：
  • 使用预先计算的值来定位和制作动画。

通过这个外包许多计算只能在窗口大小的变化上运行。如果一个人在编写代码“我能预先计算什么”时没有记住 ，那么就会有一个巨大的重构工作。

我在方向like this上摆弄了像素比率和PPI。然而，我发现使用像createHiDPICanvas()这样的函数来快速搞乱旋转和定位等事情。通过我在这个主题上阅读的各种信息，一个问题是人们没有考虑到浏览器也有缩放因子这一事实。当变焦处于100％时它看起来可以正常，但是当一个放大/缩小时它全部分开。但是你可能会发现它很有用。

在各种情况下，人们必须注意自己的所作所为。例如：

如果我绘制水平和垂直线条，然后将它们与x0 + 0.5或y0 + 0.5对齐以获得清晰的线条。

归根结底，这一切都取决于你如何在运行时进行最终计算。 This slide可能会引起关注。

Answer 2

我有我的问题的解决方案， 而且它很简单。

在createjs中，您只需要定义画布的固定高度和宽度，然后您可以缩放整个舞台，所有子节点和距离将相对于舞台缩放比例正确缩放。