Articles of html canvas

如何为HTML5 Javascript游戏创建和制作2D骨架?

我试图在HTML5中制作2D格斗游戏(有点像街头霸王)。 所以基本上有两个玩家,一个AI和一个人。 玩家需要为身体动作制作animation。 另外,还需要有一些碰撞检测系统。 我使用createjs编码,但devise模型/对象/animation,我需要一些其他的软件。 所以我正在寻找一个软件,可以: 轻松制作二维对象的自定义animation。 对象结构(骨架等)一旦定义就相同,但需要定义一次。 可以以js可读格式导出animation和模型(最好是json) 导出的格式在游戏引擎中加载后,碰撞检测可以轻松完成。 对于点1,我正在寻找一些通用的基于骨架的animation。 基于Sprite-sheet的animation将很难进行碰撞检测。

缩放绘制函数的algorithm

我在android中做游戏,我需要绘制一个函数,我的algorithm是这样的: @Override protected void onDraw(Canvas canvas) { float e = 0.5f; //from -x axis to +x evaluate f(x) for (float x = -z(canvas.getWidth()); x < z(canvas.getWidth()); x+=e) { float x1,y1; x1 = x; y1 = f(x); canvas.drawPoint((canvas.getWidth()/2)+x1, (canvas.getHeight()/2)-y1, paintWhite); } super.onDraw(canvas); } 这是如何工作的。 如果我的函数是,例如f(x)= x ^ 2,那么z(x)是sqrt(x)。 我评估-z(x)到z(x)之间的每个点,然后绘制它们。 正如你所看到的,我使用屏幕大小的一半将function放在屏幕中间。 问题不是代码不工作,实际上是绘制函数。 但是,如果屏幕是320 * 480那么这个function将会像下面的图片一样非常小。 我的问题是:如何改变这个algorithm来缩放函数? 顺便说一句,我真正想要做的是追踪一个路线,以后显示一个animation精灵,所以实际上缩放这个图像不会帮助我。 […]

用3D帆布球replace一个div(带有球形图片)

我想制作一个游戏,你必须把球保持在一个绿色的平台上。 在这一点上,球是一个球的形象。 你可以在球场上移动球,一切都很好。 在这里看到它(首先点击1)。 当你使用箭头键,你可以移动球(实际上你移动一个div )。 这看起来有点假,所以我想用一个真正的3D帆布球。 我在这里看到一个很好的例子。 (向下滚动到页面的一半,在标题上方会看到一个带有球的笑脸:平滑) 那么我怎么能用这个球进入我的比赛? 我有以下代码的球: // build the ball and draw its texture with a 2d canvas ——————————————- var buildBall = function() { // create a canvas to draw the ball's texture var ballCanvas = document.createElement('canvas'); ballCanvas.width = 64; ballCanvas.height = 64; var ballContext = ballCanvas.getContext('2d'); // draw 2 […]

在Canvas-Games中的UI

我对使用<canvas/>和WebGL进行编程相当陌生,但对HTML5非常熟悉。 到目前为止,我已经在<canvas/>上渲染了一些实体。 接下来是添加一个简单的HUD。 不过,我想知道,为HUD和UI元素使用HTML标签是不是一个好主意? 这将使他们更容易创建,但也许会对性能产生重大影响。 是否值得做一个<canvas/> – 只有HUD引擎? 我甚至试图用<div/> -Elements来replace精灵,因为它们只是旋转和移动,所以也许一个CSS旋转更适合?

如何有效地在WebGL中绘制许多相同的四边形?

最近我试图在过去的几个月里开发一个更为基本的“落砂”/“粉末游戏”风格的游戏( 见这里 ),然后在一个简单的canvas上进行原型devise,然后尝试使用PIXI.js,我决定尝试和推出我自己的基于WebGL的解决scheme,以便我可以控制整个管道。 目前,我只是遍历代表canvas(500×500)的像素的二维数组,然后调用glDrawElements在指定位置绘制像素大小的四元组。 很明显,在这样的游戏中,事情变得非常快,帧速率很快就会降低到不可用状态。 在OpenGLES / WebGl中,我无法在一个DrawTelements调用中find在不同位置绘制四边形批处理的示例,因为没有实例支持,但是人们似乎已经提到了它。 任何人都可以提供任何指针? 这是我非常简单的顶点着色器: attribute vec2 position; uniform mat3 modelViewProjectionMatrix; void main() { gl_Position = vec4(modelViewProjectionMatrix * vec3(position, 1.0), 1.0); } 这里是我的相关呈现代码JavaScript方面: this.setSandBuffers(); material = this.materials.sand; this.gl.vertexAttribPointer(this.positionAttribute, 2, this.gl.FLOAT, false, 0, 0); this.gl.uniform4fv(this.uColor, material.uColor); for (var x = 0; x < this.grid.length; x++) { for (var y = 0; […]

使用canvas context.arc()计算Reus样式世界上的图块ID

我需要为我的游戏提供一些math帮助。 我正在使用Javascript和Canvas标签来创建一个圆形的世界,想想God Finger和Reus。 我的游戏的当前版本在这里: http : //lazyeels-sandbox.appspot.com/ 问题是 : canvas画出顺时针方向90度开始的弧(或圆)。 看到一个示例图像。 我的游戏将世界拆分为细分(瓷砖)。 世界上有10个瓷砖长度,我想计算鼠标hover在哪个瓷砖上,这样玩家可以添加建筑物或调整瓷砖的高度。 所以我需要计算偏移量并从鼠标角度中扣除(弧度或度数很好)。 不过,我似乎无法做到。 我知道理论上我应该做以下事情: 计算鼠标的角度。 通过除以分段大小来计算分块(按照常规分块图即y轴/分块宽度)。 将角度的偏移量移到圆顶部的0度,而不是顺时针旋转90度)。 扣除偏移量以获得新的瓷砖位置。 这是我正在使用的主要function; var getMouseAngle = function(mouse){ var world_length = 10; var segment = (Math.PI * 2)/world_length; // Get the distance var dx = mouse.x – ((canvas.width * 0.5) – Game.camera.xScroll); var dy = mouse.y – ((canvas.height […]

JavaScript:围绕其中心旋转一个canvas以获得2D双面轮廓

我一直在使用JavaScript和HTML制作2D双面滚动游戏。 游戏设置在空间中,玩家角色可以在其中(上,下,左,右键)飞行,并旋转他周围的世界(A和D键)。 这里是HTML和JavaScript代码: <body onkeydown="keyDown(event)" onkeyup="keyUp(event)"> <canvas id="graphics" width=600 height=400 style="position:absolute;margin:0 auto;vertical-align:middle;background-image:url('Black.png');"</canvas> <script> //VARIABLES var gameCanvas = document.getElementById("graphics"); var grafx = gameCanvas.getContext("2d"); var player = new GameObject("Character1NoAAInvert.png", 268, 160, 64, 59); var maxBlock = 5; var block = new Array(); for (var i = 0; i <= maxBlock; i++) { block[i] = new GameObject('BlockInvert.png', i […]

你如何考虑放大自上而下的视口?

如果这个问题是坏的,请原谅我。 我有一个通用的自顶向下的RPG结构,我想为它创建一个可缩放的Canvas视口。 我已经阅读了几个教程,我想我一直把它搞乱。 目前的Codepen项目在这里。 项目相关代码: 相机: function Camera(PARENT, CANVAS, SUBJECT, ZOOM) { this.draw = function() { var refs = []; Rect.call(this, SUBJECT.x, SUBJECT.y, CANVAS.width*ZOOM, CANVAS.height*ZOOM, "cen"); for(o in PARENT.objects) { if(this.overlapping(PARENT.objects[o])) refs.push(o); } while(refs.length>=1) { var obj = PARENT.objects[refs.shift()]; if(obj.draw) obj.draw( this.context, //Drawing ctx this.left, //Offset left this.top, //Offset top ZOOM //Scale factor ); } […]

如何访问HTML中的底部canvas层?

我有这样的HTML: <div id="main_window"> <canvas id="canvas_hex_logic" width="200" height="100"></canvas> <canvas id="canvas_ground" width="200" height="100"></canvas> </div> 和CSS: #canvas_hex_logic{ position: absolute; top:31px; left:201px; z-index: 0; } #canvas_ground{ position: absolute; top:31px; left:201px; z-index: 1; } 在#canvas_hex_logic我为我的六边形渲染蒙版: 在它上面我放置地面层: JS代码的一部分,用于在鼠标下拾取颜色: ….. mouse event handler above ….. var c_hex = document.getElementById("canvas_hex_logic"); var ctx_hex = c_hex.getContext("2d"); ….. ….. ….. ….. ….. ….. var color = […]

全屏模式下的Cocos2D-JS Windows应用程序(Win32)

我一直在寻找一种方法来让我的Cocos2D-JS应用程序进入全屏模式,但似乎没有太多关于Cocos2D-JS(或一些似乎称之为Cocos2D-x-js)的文档。应用程序将被导出到Windows桌面平台(Win32),所以全屏模式也应该在那里工作。 我检查了Cocos2D-JS Online API ,发现了cc.screen ,它有一个名为requestFullScreen的方法,所以我试着这样做: cc.screen.requestFullScreen(document.documentElement, function() { cc.log('Requesting full screen…'); } ); 但是,这在我testing的两个平台(networking浏览器和win32)上都不起作用。 由于在将应用程序导出到win32时document不存在,于是我尝试将它cc._canvas : cc.screen.requestFullScreen(cc._canvas, function() { cc.log('Requesting full screen…'); } ); 但是这也不起作用。 有没有办法使应用程序运行在全屏模式? PD:我对可能包含在这个问题中的任何错误标签表示歉意。 我添加了我认为与这个问题有关的那些。