мольберт разбивает изображение на части

Я новичок в станках, и мне было интересно, как бы вы разделили изображение на заданное количество частей. Из того, что я собрал до сих пор, я должен использовать SpriteSheets для достижения этой цели. Тем не менее, единственные учебные пособия, которые я видел, - это те, которые содержат несколько изображений в одном Spritesheet, а не одно изображение, разделенное на несколько изображений и помещенное в SpriteSheet. Это мой код до сих пор (я знаю, что переменные фреймы не определены, так как я еще не могу правильно получить доступ к массиву spriteSheet):

  var data = {
    images: ["/images/teemo.png"],
    frames: {width:50, height:50}
  };
  var spriteSheet = new createjs.SpriteSheet(data);
  console.log(spriteSheet);
  console.log(spriteSheet[frames]);
  var frames = spriteSheet[frames];
  console.log(frames);
  for (var i=0; i<frames.length; i++){
    var bmp = new createjs.Bitmap(SpriteSheet[frames][i]);
  }

image split createjs easeljs splitter
person indubitablee    schedule 26.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Spritesheet — интересный способ (хотя на самом деле это не цель класса). Однако ваше использование неверно.

  1. Создать таблицу спрайтов
  2. Создайте экземпляры Sprite (называемые BitmapAnimation в EaselJS 0.6.1 и более ранних версиях), каждый из которых указывает на один и тот же экземпляр SpriteSheet.
  3. Используйте sprite.gotoAndStop(frame), чтобы в каждом экземпляре отображалась отдельная часть

Вот пример:

for (var i=0; i< numberOfImages; i++) {
    var sprite = new createsjs.Sprite(spriteSheetData);
    sprite.gotoAndStop(i);
    stage.addChild(sprite);
    // Other stuff
}

Вы также можете вырезать часть изображения, используя Bitmap и свойство sourceRect, которое принимает Rectangle для определения области обрезки. Это в конечном итоге будет примерно таким же, как описанный выше подход, но может потребоваться больше усилий для определения каждого размера прямоугольника.

Ваше здоровье.

person Lanny    schedule 27.10.2013
comment
Разве Spritesheet не будет более эффективным с точки зрения использования памяти, поскольку Bitmap нужно будет клонировать, чтобы создать более одного с разными sourceRects? - person programmerdave; 28.10.2013
comment
Вы также можете просто передать индекс Sprite вместо использования gotoAndStop(i): var sprite = new createsjs.Sprite(spriteSheetData, i); - person programmerdave; 28.10.2013
comment
@programmerdave При использовании одного и того же изображения в качестве источника в нескольких растровых изображениях ничего не клонируется. - person Lanny; 28.10.2013
comment
@programmerdave - Спасибо за напоминание - аргумент кадра таблицы спрайтов появился в последней версии (0.7.0) - person Lanny; 28.10.2013