Question

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

为用户创建一个空白画布以创建他想要的内容：

通过绘画或类型的东西

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

注意：我能够创建在画布上绘画的方式 ***但我找不到让用户拖动和创建形状或东西的方法那种我更倾向于选择第二种选择，以便就如何做到这一点提出一些建议。

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>

不知何故，我只需要从所有画布中获取用户绘制/形状的创建。应该有一种方法来“包围”用户创建的内容然后保存它：

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

以某种方式定义不同的点，这些点将共同构成用户创建（绘制或成形）;

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

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

我希望我能正确解释一下。有人可以给我一些指导吗？仅供参考我使用Phaser.js作为js游戏引擎。（对不起任何错误，我对这件事情不是很有经验）。

Answer 1

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

创建Phaser let settingsCloudKitUrl = URL(string:"prefs:root=CASTLE") if let url = settingsCloudKitUrl { if #available(iOS 10, *) { if UIApplication.shared.canOpenURL(url) { UIApplication.shared.open(url, options: [:], completionHandler: nil) } } else { UIApplication.shared.openURL(url) } }对象并让用户绘制到该对象，而不是绘制到画布。请参阅this example，了解如何绘制到bitmapData对象。
如果您关注＃1，那么您想要的所有数据都将存储在bitmapData对象中，您可以直接从bitmapData创建Sprite对象，例如：

bitmapData

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

1 个答案: