Coping Sprite images for animation

I’m loving the features but one that gets me every time and slows the entire process down is the inability to copy a sprite image and use it in the animation editor.

Is there a way to do this without having to redraw the entire image? Or without going into java and messing around there?

There’s so many times I want to animate my sprites that I’ve already drawn but I can’t place the image into the animation frames panel. Is there a way to do this?

I’ve attached an example from a project I clicked on here to demonstrate what i mean.

Also, similarly, when trying to place enemies or traps using the new title editor. is there a way to copy the image from the title map editor to make a sprite or vice versa rather than having to redraw the original sprite again? I’ve attached a second picture to demonstrate this.

I’m hoping there’s a good workflow that I haven’t noticed yet that will greatly change the way We create sprites and then use them for a variety of things, like animations, without having to recreate the entire image from scratch, while saving a lot of time.

If you have a workflow, share it here! :smiley:

Thanks!

1 Like

Thanks for the feedback, we definitely want to improve this scenario going forward.

I too would like to know more about this. We are now using MakeCode Arcade for “storytelling” not so much for gaming per se. Because our “sprites” which sometimes are words or custom images and are full TFT screen size (and we can use Sprite Transrorm-“double” bubble tool/extension to enlarge gallery images) our big sprites do not animate easily. For example, we could create the swimming shark as a sprite to fill the screen but we would like to animate it as you could with tiny standard size. Thanks for considering this. ps) The idea becomes more active when we add motors and LEDs to our code for hardware to drive robotics while telling the story on screen.

This was discussed briefly in the Adafruit Discord makecode channel. @jedgarpark described the “messing around” in JavaScript approach:

Easiest way is to go temporarily to the JavaScript editor and copy and paste the sprite code to the animation frame.

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . 3 3 . . . . . . . . .
    . . 3 3 3 3 3 3 . . . . . . . .
    . 3 3 3 3 3 3 3 . . . . . . . .
    . . 3 3 3 3 3 3 3 . . . . . . .
    . . 3 3 3 3 3 3 3 . . . . . . .
    . . . 3 3 3 3 3 3 . . . . . . .
    . . . . 3 3 3 3 . . . . . . . .
    . . . . . . 3 3 . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
`, SpriteKind.Player)
animation.runImageAnimation(
mySprite,
[img`
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
`],
500,
false
)

becomes:

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . 3 3 . . . . . . . . .
    . . 3 3 3 3 3 3 . . . . . . . .
    . 3 3 3 3 3 3 3 . . . . . . . .
    . . 3 3 3 3 3 3 3 . . . . . . .
    . . 3 3 3 3 3 3 3 . . . . . . .
    . . . 3 3 3 3 3 3 . . . . . . .
    . . . . 3 3 3 3 . . . . . . . .
    . . . . . . 3 3 . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
`, SpriteKind.Player)
animation.runImageAnimation(
mySprite,
[img`
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . 3 3 . . . . . . . . .
    . . 3 3 3 3 3 3 . . . . . . . .
    . 3 3 3 3 3 3 3 . . . . . . . .
    . . 3 3 3 3 3 3 3 . . . . . . .
    . . 3 3 3 3 3 3 3 . . . . . . .
    . . . 3 3 3 3 3 3 . . . . . . .
    . . . . 3 3 3 3 . . . . . . . .
    . . . . . . 3 3 . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . .
`],
500,
false
)

adafruit-discord-makecode-sprite-vs-anim-discussion-Screen_Shot_2020-01-14_at_3.27.43_PM

@AussieAlpha, @richard, @kjw, This is what I mean by animation of a larger sprite, in this case the “transform” to larger size extension is installed and I’ve enlarged a shark sprite from the gallery and then added animation to the standard tiny shark. Now, the “double sprite size” bubble will not fit into the animation system and when I take this to JS and try to duplicate the text code I get errors which I don’t know enough to resolve. So is it possible to put the “2x” code in JS into the program for animation so as to animate the large shark? https://makecode.com/_gL0KAT22wH2v

Is https://makecode.com/_MmvAAp4E67uj what you are after? I made that in JavaScript mode and flicked back, I don’t know if that’s necessary, that’s just the way I happened to do it.

Yes, @kjw, that’s what I wanted, I will study it. Thanks a million.

If I understand correctly, you want to copy pixels from one editor window to another. Here’s how I do it:

  1. Select pixels using the rectangular select tool in the editor.

  2. Copy using the keyboard shortcut (Ctrl-C) and close the editor.

  3. Open another editor, set the same size parameters and paste using keyboard shortcut (Ctrl-V).

They added this feature recently; this topic is much older than the copy and paste feature.