文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用玩家自制的精灵作为游戏中的精灵

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

Stack Overflow用户

提问于 2016-10-29 22:11:04

回答 1查看 96关注 0票数 2

我正在寻找一种方法，允许玩家画他们自己的角色，然后能够与他们在游戏中玩。为了使概念非常简单，让绘制的球员只是一个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游戏引擎。(抱歉有任何错误，我对这件事不是很有经验)。

javascript

canvas

game-physics

phaser-framework

polygons

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-30 12:09:20

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

不要在画布上绘图，而是创建一个Phaser bitmapData对象，并让用户对该对象进行绘图。请参阅这个例子，它显示了如何绘制到bitmapData对象。
如果遵循#1，那么您想要的所有数据都将存储在bitmapData对象中，您可以直接从您的bitmapData对象创建一个Sprite，例如：

// 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);

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40324197

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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