Нажмите область спрайта на холсте - PullRequest
Новая
       22

Нажмите область спрайта на холсте

7 голосов
/ 10 мая 2011

Я создаю игру в javascript.в настоящее время спрайты являются элементами div с фоновым изображением, которое обновляется для создания анимации.Я слышал, что если я создаю холст элементов и перетаскиваю спрайт на холст, я могу сделать спрайт кликабельным, пропуская прозрачные области.

Мне нужно решение, в котором можно щелкнуть мои игровые спрайты, но область кликабельнасоответствует форме спрайта.Это также должно быть автоматическим.Я не могу сделать это с помощью готовых карт кликов.

Ответы [ 2 ]

7 голосов
/ 10 мая 2011

У меня есть учебник, который делает почти то, что вам нужно для тестирования хитов. Смотрите код здесь.

Когда вы нажимаете, код рисует каждую фигуру (я использую прямоугольники, но она прекрасно работает с полупрозрачными изображениями) на холсте в памяти (ghostcanvas) и проверяет, находится ли пиксель мыши на пикселе, который не прозрачный.

Соответствующий код вставлен ниже: 

function myDown(e){
  getMouse(e);
  clear(gctx); // clear the ghost canvas from its last use

  // run through all the boxes
  var l = boxes.length;
  for (var i = l-1; i >= 0; i--) {
    // draw shape onto ghost context
    drawshape(gctx, boxes[i], 'black');

    // get image data at the mouse x,y pixel
    var imageData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imageData.width) * 4;

    // if the mouse pixel exists, select and break
    if (imageData.data[3] > 0) {
      mySel = boxes[i];
      offsetx = mx - mySel.x;
      offsety = my - mySel.y;
      mySel.x = mx - offsetx;
      mySel.y = my - offsety;
      isDrag = true;
      canvas.onmousemove = myMove;
      invalidate();
      clear(gctx);
      return;
    }

  }
  // havent returned means we have selected nothing
  mySel = null;
  // clear the ghost canvas for next time
  clear(gctx);
  // invalidate because we might need the selection border to disappear
  invalidate();
}
5 голосов
/ 10 мая 2011

Вы можете сделать фон прозрачным и проверять изображения на прозрачность по нажатому пикселю. Вот код из одного из моих игровых прототипов: 

function getAlphaInImage(img, x, y) {
    var tmp = document.createElement("CANVAS");
    tmp.setAttribute('width', img.width);
    tmp.setAttribute('height', img.height);
    var tmpCtx = tmp.getContext('2d');
    tmpCtx.drawImage(img, 0, 0);
    var imageData = tmpCtx.getImageData(x, y, 1, 1);
    var alpha = imageData.data[3];
    tmp = null;
    imageData = null;
    return alpha;
}

Прежде чем вызвать это, я сначала проверяю, был ли щелчок мышью внутри всего изображения.

...