Questions tagged «html-canvas»

HTML5的一项新功能，允许Javascript应用在浏览器中具有绘图表面。

7
管理要在HTML5 Canvas上绘制的2D数组中的文本地图
因此，我只是为了好玩而制作HTML5 RPG。地图是<canvas>（宽度512像素，高度352像素|宽16格，上下11格）。我想知道是否有一种更有效的方法来绘制<canvas>。 这就是我现在的方式。 如何在地图上加载和绘制图块 正在使用该图块以图块（32x32）绘制地图Image()。图像文件通过一个简单的for循环加载，并放入一个名为的数组tiles[]，使用时要进行绘制drawImage()。 首先，我们加载瓷砖... 这是完成的过程： // SET UP THE & DRAW THE MAP TILES tiles = []; var loadedImagesCount = 0; for (x = 0; x <= NUM_OF_TILES; x++) { var imageObj = new Image(); // new instance for each image imageObj.src = "js/tiles/t" + x + ".png"; …
5
游戏中的演员应该负责吸引自己吗？
我对游戏开发非常陌生，但对编程却不是。 我（再次）使用JavaScript的canvas元素在玩Pong类型的游戏。 我创建了一个Paddle具有以下属性的对象... width height x y colour 我也有一个Pong具有诸如...的属性的对象 width height backgroundColour draw()。 该draw()方法当前正在重置canvas，这就是出现问题的地方。 如果Paddle对象具有draw()负责其绘制的方法，或者draw()该Pong对象的负责负责其演员的绘制（我认为这是正确的术语，如果我不正确，请更正我）。 我发现在Paddle实例化两个对象Player和时，绘制自身会很有利Enemy。如果在没有Pong的draw()，我需要两次写类似的代码。 最佳做法是什么？ 谢谢。
2
我的游戏即将完成！现在我该怎么做？[关闭]
已关闭。这个问题需要更加集中。它当前不接受答案。 想改善这个问题吗？更新问题，使其仅通过编辑此帖子来关注一个问题。 5年前关闭。 我有一个即将完成并准备启动的HTML5 /画布游戏。这是一款2D游戏，您可以在其中探索并破坏程序生成的景观，制作物品和结构以求生存。我必须完成“结局”并修复一些错误，但是游戏已经为玩家准备好了。 该游戏将免费在网络上播放，我计划开始针对iOS和Mac App Store推出工作版本。即使在游戏启动后，我也将继续为其添加内容。 有人可以推荐我在启动游戏前应该做的事情吗？谢谢！
3
在HTML5 Canvas游戏上有双重缓冲吗？
我简单的画布游戏似乎可以在Mac和Linux上的Chrome和FF上正常运行。我还没有机会在智能手机或Windows环境下对其进行测试。它不使用双缓冲，但是我已经看到一些使用它的JS Canvas示例。 什么时候建议使用双缓冲？它仅对特定的浏览器有影响吗？是否会对性能产生重大影响？ 谢谢！
7
HTML5游戏（画布）-UI技术？
我正在使用PhoneGap开发用于移动设备（Android / iPhone / WebOS）的JavaScript / HTML5游戏（使用Canvas）。我目前正在尝试设计UI和游戏板的构建方式以及它们之间的交互方式，但我不确定最佳解决方案是什么。这是我能想到的- 使用drawImage和fillText之类的东西将UI正确地构建到画布中。使用常规DOM对象在画布外部构建UI的一部分，然后在UI元素需要与游戏面板画布重叠时在画布上浮动div。还有其他我可能没有想到的可用于构建游戏UI的技术吗？另外，以下哪一种将被视为“标准”方式（我知道HTML5游戏不是很流行，因此可能还没有“标准”方式）？最后，您会推荐/使用哪种方式？ 提前谢谢了！
6
Box2D是否有其他JS端口？
我一直在考虑为HTML5创建自上而下的2D汽车游戏。对于我的第一个游戏，我编写了物理原理，并碰撞了自己。但是对于这个游戏，我想使用一些现成的库。 我发现了Box2D及其JS端口。 http://box2d-js.sourceforge.net 它看起来像是很老的港口，制造于2008年。它缺乏当前Box2D的许多功能，还是它有重大问题？还有其他选择吗？
7
在构建基于浏览器的游戏时要画布还是不画布？
背景：我具有广泛的开发背景，但是我上一次编写游戏的代码是在多年前。我的Javascript技能非常有限，我打算通过构建一个简单的游戏（俄罗斯方块，吃豆人或类似复杂程度的东西）来改进它们。 问题：在我看来，我需要做出的基本选择是是否应该对<canvas>元素进行渲染。 使用画布，我拥有用于​​渲染点，线和更复杂物体的基本工具。大概有或将会有各种框架来帮助实现这一目标。 没有画布，我可以将对象保留在DOM树中，就像普通的网页一样，只是非常复杂，并且具有许多重叠的元素。 一种方法比另一种更好吗？它们相互排斥吗？我怎么知道该选哪个？
2
我应该如何处理比近剪切平面更靠近眼睛的剪切顶点？
我正在用JavaScript滚动自己的3D引擎，并且仅使用画布绘图，而不使用WebGL。这是另一个Minecraft克隆版本；我喜欢盒子，不要判断我。 到目前为止，除一件事外，其他所有东西都运转良好：在3D模式下，当某些顶点在接近裁剪平面的后面时，它们在屏幕上的投影变得怪异（假定用于追踪平面的其他顶点在前面）。 我尝试剪切这些点，但是随后我可以看到使用这些顶点的曲面。在WebGL / OpenGL中，图形卡可以处理这些点，并且可以正确渲染平面，但是我无法使用硬件，因此我必须自己编写代码。 我不太确定该怎么做，目前我想到的最后一件事是反转玩家近裁剪平面后面的点的投影，这很合逻辑，因为我必须将一个点投影到前面的屏幕上顶点 这是我的想法： 以下是一些图像说明发生了什么： 从远处看，蓝色框呈现得很好。 当某些顶点在播放器的接近裁剪平面的后面时，我会进行反向投影，但看起来不正确： focalLength *= -1; 2d.x = x*focalLength/z; 2d.y = y*focalLength/z; 请注意，由于用于绘制其面的所有顶点都在播放器后面，因此后面的灰色框已被完全删除。 这是在向上或向下查找时发生的情况。 我不知道该怎么做背后的数学运算，我希望有人已经遇到了同样的问题，可以为我提供帮助。
1
多人HTML5，Node.js，Socket.IO [关闭]
已关闭。这个问题需要细节或说明。它当前不接受答案。 想改善这个问题吗？添加细节并通过编辑此帖子来澄清问题。 5年前关闭。 我尝试使用HTML5 Canvas，JavaScript（太使用John Resig简单继承库）和带有Socket.IO的Node.js创建简单的多人游戏。我的客户代码： var canvas = document.getElementById（'game'）; var context = canvas.getContext（'2d'）; var socket = new io.Socket（'127.0.0.1'，{port：8080}）; var player = null; var UP ='UP'， LEFT ='LEFT'， DOWN ='DOWN'， RIGHT ='正确'; socket.connect（）; socket.on（'connect'，function（）{socket.send（）; console.log（'Connected！'）; 玩家=新玩家（50，50）; }）; socket.on（'message'，function（msg）{ if（msg =='UP'）{ player.moveUP（）; } else if（msg =='LEFT'）{ player.moveLEFT（）; } else if（msg =='DOWN'）{ …
6
运行APK时android性能不佳，在浏览器中无法正常运行
我已经使用Phaser引擎在HTML5中创建了一个小型游戏项目（尝试了1.1.5和1.1.6）。然后要将其移植到移动平台，请使用适用于Windows Phone 8，Android和iOS的Phonegap / Cordova。 在我的游戏中，大约有10个元素具有动画效果（从a点移动到b点并同时旋转一些）。在iOS和Windows Phone 8上，我没有遇到任何问题。 但是对于Android，性能是不可接受的。另一方面，如果我通过设备浏览器运行游戏，则游戏运行平稳，没有任何滞后。但是，已编译的APK会非常生涩，并且元素的移动速度非常缓慢且呈闪烁状态。 我已检查清单文件中的android硬件加速标志设置为“ true”。也尝试将其更改为false，但这并未反映出性能的任何变化。 我已经在三星S2设备上的Android 4.2上进行了检查，在性能上更好。但是在Asus Nexus Tab 7（运行Android 4.4）上，它非常生涩，而OS和Device都是最新的。还检查了另一台运行Android 4.3的设备（三星Galaxy Grand Duos），在该设备上的性能也根本不好。 在我的游戏中，尝试了两种WebGL / Canvas渲染（Phaser引擎使用Pixi.js，如果不支持WebGL，则会回退到2d canvas），但是没有任何变化。与easyljs类似。 如果还有其他人遇到类似的问题，并且可以建议采取任何方式获得本机般的性能。我检查了cocoonjs的示例，尽管它们看起来很平滑并且可以接受，但我不能这样做。
5
在浏览器中（如矮人堡垒）构建ascii地图和移动角色的好的技术解决方案？[关闭]
关闭。这个问题是题外话。它当前不接受答案。 想改善这个问题吗？ 更新问题，使其成为Game Development Stack Exchange 的主题。 5年前关闭。 我想为我的游戏网站构建一个网络应用程序，其中涉及使用文本字符来表示动物和人，并让它们通过独立的（服务器驱动）AI在地图方块上移动。 因此，本质上是浏览器中的矮人要塞地图： 移动的生物，生物，npc和pc。尽管不是我不想达到这样的规模，但我可能随时会开始显示大约四分之一的内容。 某些背景/固定瓷砖可能会被静态加载。但是对于生物/动物和可以移动的物体，我不确定哪种技术解决方案最有效。 我知道，<canvas>尽管我不知道其功能是否适合此用例。当然，将需要一定数量的javascript。 是否有适合该用例的javascript库或canvas库？我不知道的另一种技术？有人知道做过任何与此类似的网站的例子吗，这样我才能从中得到启发。
2
肮脏的2D地图渲染
我不断听到人们谈论HTML5地图渲染的“脏渲染”。我已经用Google搜索并搜索了GameDev，但是关于它的内容并不多。 到底是什么 如何正确实施？
1
gluLookAt如何工作？
据我了解， gluLookAt( eye_x, eye_y, eye_z, center_x, center_y, center_z, up_x, up_y, up_z ); 等效于： glRotatef(B, 0.0, 0.0, 1.0); glRotatef(A, wx, wy, wz); glTranslatef(-eye_x, -eye_y, -eye_z); 但是当我打印出ModelView矩阵时，对的调用glTranslatef()似乎无法正常工作。这是代码片段： #include <stdlib.h> #include <stdio.h> #include <GL/glut.h> #include <iomanip> #include <iostream> #include <string> using namespace std; static const int Rx = 0; static const int Ry …
2
基于图块的等距游戏中的自由运动
在基于图块的等距游戏中，有没有合理的简便方法来实现自由移动？这意味着玩家不仅会立即从一个图块跳到另一个图块，或者不会被“捕捉”到网格（例如，如果图块之间的移动已设置动画，但是在动画完成之前您将被禁止执行任何操作）。我真的是一个与游戏编程有关的初学者，但是借助此站点和其他资源，可以很轻松地完成基本的工作，但是我无法针对此特定问题找到任何有用的资源。 。 目前，我已经简化了一些与此相关的东西：http：//jsfiddle.net/KwW5b/4/（WASD运动）。移动的想法是使用鼠标地图来检测玩家何时移动到另一个图块，然后翻转偏移量，并且在大多数情况下可以正常工作（每个角使玩家移动到错误的位置：请参阅http： //www.youtube.com/watch?v=0xr15IaOhrI，这可能是因为我无法使完整的鼠标图正常工作），但是我并不幻想它甚至接近一个好的/理智的解决方案。而且无论如何，这主要只是为了演示我想实现哪种类型的东西。
1
将精灵设置为鼠标的正面方向
我正在构建一个html5 canvas游戏，我需要一种方法来让我的精灵面对鼠标光标。我有精灵的X和Y坐标，还有指针的X和Y坐标。我所坚持的只是使精灵面对指针的数学运算。一切都在2D世界中，所以我无法想象它会太复杂，但是我对这些东西的经验很少。 同样，有关此类事情的文章/博客文章的任何有用链接也都很棒（一般来说，二维游戏编程，而不是Javascript）。 作为补充，我应该注意，我需要一个角度（度数），该角度将使我使用其X和Y位置指向光标。 我怎么知道光标的坐标，这些东西都放在哪里？
9 2d  html5  html-canvas 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.