Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add flipping and rotating to the image/tilemap/animation editor #7810

Merged
merged 3 commits into from Jan 21, 2021

Conversation

riknoll
Copy link
Member

@riknoll riknoll commented Jan 21, 2021

What....? Could it be....?? IT IS!!! Flip and rotate are finally in the image editor!!!!!

2021-01-20 16 33 18

They both work basically like you would expect. If you select something with the marquee tool, then only that part of the image is flipped/rotated. Other random things:

  1. If you are in the tilemap editor, walls are also rotated (just like how we handle them in the marquee tool)
  2. In the animation editor this will only rotate the current frame and will not resize the image. If anything would be cut off (e.g. width != height), then the image gets converted into the floating layer so nothing is lost
  3. You can also now click outside the canvas to clear the marquee selection (this always bothered me)

And the new keyboard shortcuts:

  • SHIFT + V is flip vertical
  • SHIFT + H is flip horizontal
  • [ is rotate counterclockwise
  • ] is rotate clockwise

All of this is pretty self contained (except the buttons), so should be safe to merge.
Thanks to @soniakandah for the icons and @shakao for putting the buttons in the editor.

riknoll and others added 3 commits January 20, 2021 14:10
@abchatra
Copy link
Contributor

Alt Text

Copy link
Member

@jwunderl jwunderl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice! LGTM


const newImage = isTilemap ? new pxt.sprite.Tilemap(source.image.height, source.image.width) :
new pxt.sprite.Bitmap(source.image.height, source.image.width);
const newOverlayLayers = source.overlayLayers ? source.overlayLayers.map(layer => new pxt.sprite.Bitmap(layer.height, layer.width)) : undefined;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const newOverlayLayers = source.overlayLayers ? source.overlayLayers.map(layer => new pxt.sprite.Bitmap(layer.height, layer.width)) : undefined;
const newOverlayLayers = source.overlayLayers?.map(layer => new pxt.sprite.Bitmap(layer.height, layer.width));

optional nit


const newImage = isTilemap ? new pxt.sprite.Tilemap(source.image.width, source.image.height) :
new pxt.sprite.Bitmap(source.image.width, source.image.height);
const newOverlayLayers = source.overlayLayers ? source.overlayLayers.map(layer => new pxt.sprite.Bitmap(layer.width, layer.height)) : undefined;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const newOverlayLayers = source.overlayLayers ? source.overlayLayers.map(layer => new pxt.sprite.Bitmap(layer.width, layer.height)) : undefined;
const newOverlayLayers = source.overlayLayers?.map(layer => new pxt.sprite.Bitmap(layer.width, layer.height));

@riknoll riknoll merged commit 3733dc6 into master Jan 21, 2021
@riknoll riknoll deleted the flip-rotate2 branch January 21, 2021 17:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants