Question

我正在尝试制作一个小RPG。

你可以看到我的实际工作here（IE不支持）来理解我想要的东西我没有使用任何图书馆。
因此，游戏可能会落后于小型计算机（如我的）你知道一个js库（带画布）我可以用来使这个项目真实吗？

这应该允许我：
- 创建多个图层（角色必须在某些对象后面） - 允许我滑动对象（我不想让我的角色移动16小tp，我需要一个滑动方法）。
- 我需要它获得麻省理工学院的许可证。

PS：我试过了：pixi.js和melon.js，我并不感觉他们是我需要的。

感谢你的所有答案，祝你有个美好的一天：D

Answer 1

我会和我的狗一起出去，我会回来的。

大声笑！我们有一个名为“Scrappy”的迷你Pinscher--他全身湿透了5磅，但他拥有狮子的核心！我会发一个快速回答，然后和Scrappy＆amp;我会回来的。： - ）

<强> 1。分层

Html Canvas没有图层，但您可以为游戏元素指定z-index属性，以指示它们应该绘制到画布的顺序 - 结果是基本分层。

（不审查您的代码库）您可能已将每个游戏块存储在自己的javascript对象中，并且可能将JS对象存储在数组中。该JS对象可能包含要绘制游戏块的x，y坐标。

var player1={
    x:50,
    y:25
}

var gameObjects=[player1];

要添加z-indexing（分层），您所要做的就是为每个游戏块对象添加z属性：

var player1={
    x:50,
    y:25,
    z:100,
}

像HTML / CSS一样使用z属性来分层网页的内容。

如果你需要玩家2在玩家1的后面，你只需使玩家2的z属性低于玩家1的z属性。

// player2 will be "layered" behind player1 because their z is lower
var player2={
    x:200,
    y:250,
    z:90,
}

然后在重新绘制下一个游戏框架的画布之前，您只需在z属性上对gameObjects数组进行排序。结果是所有游戏对象都具有所需的分层（z-indexing）。在javascript中对数组进行排序非常快。

以下是月球和（可选）绕地球轨道运行的卫星的示例。月亮的z属性＆amp;卫星用于在地球前后适当地对它们进行分层：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

$timer=$('#timer');

var satellite=document.createElement("canvas");
var actx=satellite.getContext("2d");
satellite.width=5;
satellite.height=5;
actx.beginPath();
actx.arc(3,3,2,0,Math.PI*2);
actx.closePath();
actx.fillStyle='gray';
actx.fill();

var nextTime=0;
var delay=1000/60*1;
var PI=Math.PI
var PI2=PI*2;

var images=[];
var earth=new Image();
earth.onload=start;
earth.src='https://dl.dropboxusercontent.com/u/139992952/multple/earth.png';
var moon=new Image();
moon.onload=start;
moon.src='https://dl.dropboxusercontent.com/u/139992952/multple/moon.png';
var imgCount=2;
function start(){
  if(--imgCount>0){return;}   
  images.push(makeImage(earth,cw/2,ch/2,0,1.00,0,0,function(){return(200);}));
  images.push(makeImage(moon,cw/2,ch/2,cw/2-moon.width/2-10,.20,Math.PI/120,0,function(){return((this.angle>PI)?100:300);}));
  requestAnimationFrame(animate);

  $('#satellites').click(function(){
    for(var i=0;i<10;i++){
      images.push(makeImage(
        satellite,cw/2,ch/2,earth.width/2+Math.random()*25,Math.random()*.75,Math.PI/120*Math.random()*3,0,function(){return((this.angle>PI)?190:210);}
      ));
    }
  });

}

function update(){
  for(var i=0;i<images.length;i++){
    var img=images[i];
    img.angle=(img.angle+img.deltaAngle+PI2)%PI2;
    img.z=img.calcZ();;
  }
  images.sort(function(a,b){return a.z - b.z});
}


function animate(time){
  if(time<nextTime){requestAnimationFrame(animate); return;}
  nextTime=time+delay;
  var t1=performance.now();
  draw();
  update();
  $timer.text(images.length+' images in '+parseFloat(performance.now()-t1).toFixed(1)+' ms');
  requestAnimationFrame(animate);
}

function draw(){
  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<images.length;i++){
    var img=images[i];
    var x=img.cx+img.radius*Math.cos(img.angle);
    var y=img.cy+img.radius*Math.sin(img.angle)*img.scaleY;
    ctx.drawImage(img.image,x-img.image.width/2,y-img.image.height/2);
  }
}


function makeImage(img,cx,cy,radius,orbitFlattenY,deltaA,angle,calcZ){
  return{
    cx:cx,
    cy:cy,
    z:0,
    calcZ:calcZ,
    radius:radius,
    scaleY:orbitFlattenY,
    angle:angle,
    deltaAngle:deltaA,
    image:img
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='satellites'>Add 10 satellites</button>
<span id='timer'>Update+Draw time=#ms</span>
<br>
<canvas id="canvas" width=600 height=400></canvas>

<强> 2。滑动游戏片段

Html Canvas不允许“滑动”，因为它无法移动自身绘制的任何内容。 Canvas过程总是擦除画布并重新绘制新位置的碎片。

话虽如此，你可以通过以较小的增量改变你作品的[x，y]来获得更平滑的“滑动”而不是“跳跃”：

// instead of x+=2
x+=0.50;

由于增量移动较小（0.50而不是2.00），您可能需要更频繁地移动该部分4倍（2 / 0.50）。

第3。许可

我认为Stackoverflow自动获得“Creating Commons”许可，所以请随时在RPG中使用我的答案 - 我甚至不需要归属： - ）

创建2D RPG，搜索画布库

1 个答案: