如何使用玩家自己制作的精灵作为游戏中的精灵

Question

我正在寻找一种方法，让玩家可以绘制自己的角色，然后在游戏中与他们一起玩。为了使这个概念非常简单，让绘制的玩家只是一个二维形状或一组直线和圆圈，或者甚至是两者的混合。我认为这可以通过以下步骤分解：

做一个空的canvas供用户自己创建：

通过绘画或类似的东西

通过使用允许拖动和塑造形状的特定多边形创建界面；

注意：我能够创建一种在canvas上作画的方法***但我没有找到一种方法让用户拖动并创建形状或类似的东西。我更有可能选择第二个选项，因此我们将不胜感激关于如何做到这一点的一些建议。

window.onload = init; 
 

function init() {


  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

  var painting = document.getElementById('paint');

  var paint_style = getComputedStyle(painting);
  canvas.width = "1024"
  canvas.height = "1024";

  var mouse = {
    x: 0,
    y: 0
  };

  canvas.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
  }, false);

  ctx.lineWidth = 3;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.strokeStyle = '#00CC99';

  canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);

    canvas.addEventListener('mousemove', onPaint, false);
  }, false);

  canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
  }, false);

  var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Tojo - canvas draw</title>


  <link rel="stylesheet" href="index.css">


</head>

<body>
  <script src="app.js"></script>

  <div id="paint"></div>
  <canvas id="myCanvas" style="border: 3px solid black;"></canvas>

</body>

</html>

（在 canvas 片段上绘画）***

不知何故，我只需要从所有 canvas 中获取用户绘制/形状的创作。应该有一种方法可以 "surround" 用户创建的内容然后保存：

通过（在绘图的情况下可能）仅检查白色和玩家颜色之间的颜色比较；

通过以某种方式定义不同的点，这些点一起将计入用户创建（绘制或成形）；

注意：在这种情况下，我有点迷路了。我几乎不知道这是怎么做到的。但是，我听说过 box2d，但我认为它更侧重于 C 或类似的东西？它会起作用吗？我该怎么做？

我最终会存储用户创建并准备将其作为精灵图像加载到游戏中。

希望我能正确解释。有人可以给我一些指导吗？仅供参考，我使用 Phaser.js 作为 js 游戏引擎。（如有错误，请见谅，我对这方面的经验不是很丰富）。

Answer 1

希望这会让您朝着正确的方向前进：

创建一个 Phaser bitmapData 对象并让用户绘制到该对象，而不是绘制到 canvas。请参阅显示如何绘制到 bitmapData 对象的 this example。
如果你遵循#1，那么你想要的所有数据都将存储在 bitmapData 对象中，你可以直接从你的 bitmapData 对象，例如：

// Create a bitmapData object for the user to draw on
var bmd = this.game.make.bitmapData(64, 64);

// code to draw on `bmd` goes here

// Create a Sprite based on the bitmapData from above
var userSprite = this.game.add.sprite(0, 0, bmd);

如何使用玩家自己制作的精灵作为游戏中的精灵

How to use player own-made sprite as in-game sprite

javascript

canvas

polygons

game-physics

phaser-framework