Articles of HTMLcanvas

缩放过程中的偏移量将对象保留在边界内

我有一个简单的缩放function,让用户放大和缩小。 我有一个问题,当我缩小对象变得越来越小,到边界被打破的点。 这个想法是红点停留在圆内,但红点永远不会移动,它的位置和大小是固定的。 这个例子是正确的,因为红点在圆内: 现在,如果我缩小并使圆圈变小,则红点会在圆圈外面结束,如下所示: 我有的问题是,我不知道如何抵消圆圈,以保持在圆圈内的红点,而不管缩放比例。 我在这里有一个工作的例子: http : //jsfiddle.net/3wr885so/如果你缩小,你会发现圆不能修复它的偏移量,以保持在一切正确的地方。 下面是我用于缩放和绘图的两个相关function: 缩放function function zoomObj(e){ var delta = e.wheelDelta, mousePos = {}; mousePos.x = e.pagex; mousePos.y = e.pageY; var range = zoom.percentVal * zoom.modifier; if(delta == 120){ //scroll in var endVal = zoom.position + range; } else { //scroll out var endVal = zoom.position – range; […]

为什么我的地精只select一次走路方向?

我正在做一个simpe二维帆布游戏,有一个小妖精精灵,我想要在屏幕周围走动。 我最初尝试的是一个随意的掷骰,它会select一个方向,地精会朝着这个方向走。 它没有有效地工作,他在一个地方摇晃。 这是我目前的应用程序,但他只运行在一个rundom的方向,并没有改变。 我究竟做错了什么? 这是所有与地精对象和运动有关的代码。 var goblin = { speed: 100, pos: [0, 0], dir: 1, changeDir: true, stepCount: 0, stepTotal: 0, sprite: new Sprite( goblinImage, [0,0], [30,45], 6, [0,1,2,3,2,1], true) }; function getNewDir(){ goblin.dir = Math.floor(Math.random()*4)+1; }; function checkGoblinMovement(){ if(goblin.changeDir){ goblin.changeDir = false; goblin.stepCount = 0; goblin.stepTotal = Math.floor(Math.random*650)+1; getNewDir(); } else { […]

在0处的Alpha值显示Android Canvas位图的黑色

有几个类似的问题,但似乎没有一个直接的答案。 如果我从.png图像创建一个位图,并且想要将颜色(即真正的粉色)设置为透明,则颜色将变为黑色。 我使用get和set像素方法,遍历像素颜色的数组。 我希望做到这一点的方法如下: public Bitmap getFormattedBitmap(Bitmap bm, int newHeight, int newWidth, int r, int g, int b, int a) { int width = bm.getWidth(); int height = bm.getHeight(); int pixNum = width * height; int[] pixels = new int[pixNum]; int scaleWidth = newWidth * width; int scaleHeight = newHeight * height; bm.getPixels(pixels, 0, width, […]

翻译帆布旋转的精灵射击

我试图将子弹调整到我的不同的精灵枪(自上而下2D为Android)。 现在我使用这种方法来绘制我的项目符号: public void draw(Canvas canvas){ update(); canvas.save(); canvas.rotate(angle, x + width / 2, y + height / 2); canvas.translate(translaterX, translaterY); canvas.drawBitmap(bitmap, x, y, null); canvas.restore(); } 这里的问题是translater,我总是不得不添加或减去从我的枪产生的子弹,当我的小精灵旋转,我无法弄清楚,有没有这样的标准值,像translaterX = bitmap.getwidth()/2 ? 我真的不明白翻译是如何工作的,我觉得我已经试过了,我错过了什么? 举例来说,让我说我的枪总是在位图的中间。 还是有另一种方法来做到这一点更简单?

相机移动,绘制网格

如果我有一个20×10的网格(640×320),其中瓷砖是32×32 网格呈现: for (var y = 0; y < 10; y++) { for (var x = 0; x < 20; x++) { var tileX = Math.round(Camera.x / 32); var tileY = Math.round(Camera.y / 32); var tile = Game.map[tileY][tileX]; rect(x * 32, y * 32, 32, 32); } } 相机跟随播放器对象,并在canvas中间。 相机位置(x)的计算如下: Player.x – Camera.x + 320 […]

最有效的方式来检测和行为碰撞(具体为我的2D游戏)

目前,主要是为了好玩,我正在开发一款2D游戏,我们将所有可碰撞块(背景)join到数组中,并将其放入3D数组的不同部分。 玩家对象被放入AI数组中。 它看起来像这样 – > var world_objects = [ [], //All 'background' collide-able objects. Such as stones and the border ~~ Code name: bg [], //All AI ~~ code name: ai [] //Projectiles ~~ Code name: ps ]; 该地图被设置为一个位图,我使用另一个3D数组,目前被制作成15×15,但是这可能会改变。 棕色边框包含在位图和world_objects数组中。 而当插入块/ ai /抛射物时,它们都将具有基本的物体属性: x,y(2个variables,一个只有正常的x,y根据canvas中的确切像素,另一个是根据哪个单元格为位图) 宽度和高度(ai和射弹的宽度和高度都根据每个单元格的大小logging为百分比,因为大小是根据屏幕大小而变化的) 与其他属性无关的碰撞。 什么是检测所有对象最有效的方法,以及它们是否相互碰撞? 如果需要的话,我可以添加额外的属性给每个对象,如果这将使更容易和更高效。 点击查看所有的代码

如何提高我的HTML5canvas上的graphics?

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

在Android Canvas的3D空间中绘制两个正交的string?

我想在canvas上绘制两个string。 第一个string必须围绕Y轴旋转,例如45度。 第二个string必须从第一个string的末尾开始,并且必须与它正交。 这是我的代码: String text = "In the"; float textWidth = redPaint.measureText(text); Matrix m0 = new Matrix(); Matrix m1 = new Matrix(); Matrix m2 = new Matrix(); mCamera = new Camera(); canvas.setMatrix(null); canvas.save(); mCamera.rotateY(45); mCamera.getMatrix(m0); m0.preTranslate(-100, -100); m0.postTranslate(100, 100); canvas.setMatrix(m0); canvas.drawText(text, 100, 100, redPaint); mCamera = new Camera(); mCamera.rotateY(90); mCamera.getMatrix(m1); m1.preTranslate(-textWidth – 100, -100); […]

最好的办法做“过场animation”

我很好奇在canvas上显示过场animation的最佳方法。 当我说“过场animation”时,我的意思是静态图像从一个到另一个。 最好是使用超时一定的秒数,然后转到下一个图像? 或者,以某种方式使用主循环并增加计数器会更好吗? 如果有人有他们使用的方法,发表一个答案! :d

Phaser中的甜甜圈形状/反面罩

我试图在Phaser中获得一个甜甜圈形状的面具(基本上是一个普通面具的反面)。 蒙版形状是dynamic的,所以它需要是一个Phaser.Graphics多边形对象。 预期结果: 蓝色的形状是我想要掩盖的精灵,它的洞是面具本身。 我search了Phaser和Pixi v2文档和论坛,但是没有发现。 谁知道我怎么能做到这一点? 如果不可能的话,我想把面具分成八个多边形: 这个想法有多健全? 这将是昂贵的,还是会好起来的? 或者其他方式来实现这一目标?