Is there a way to have a sprite start off of the canvas, scroll across the canvas, and then stop when it is off the canvas on the other side? I have tried using negative values and that does not seem to work, and the sprite always stops when it hits the edge.
I did not study this question in detail, but in one of my sketches I did so; over the canvas I superimposed a panel under which the sprite was hiding. Do you understand this idea?
I have the same problem. I’ve seen a guy do smomething that imitates it on YouTube, by using a small canvas, and a stage that is bigger than it. I don’t think the canvas is the problem, but the stage component.
I am still trying. I made the canvas relative in width to 150%, and height fill container. The stage is now centered.
Success! That actually works. I will play around with it for a while and come back and explain how I did it.
Well, it works only in one direction at the time. You can set the size of the stage som that it You want to have sprites move from an invisible area to the right, then across the screen to an invisible area on the left, or to/from invisible areas over the screen under the screen.
I tried it out successfully in the left/right fashion. Here’s a summary of how to do it:
- Change the Stage width to 800 and height to 450 (creating a 16:9 ratio). This will make the stage quite wide, with plenty of room to the left and right.
- Change canvas height to Fill container, and set canvas width to relative and 250%.
- Upload an image into a sprite of a rectangle. Place it on the stage, and make its height 450 and its width 320. Set the position to x=400, y=225. What You will see from Your ‘Game’ on screen will quite nicely fit in this container.
- Sprites that You place inside this rectangle will be visible on screen, sprites to the left and right will not be visible, but they can be controlled via blocks. Sprites can now move off the screen and still be active.
- I have also tried to move sprites up from the bottom of the screen, and that does not work, like for left/right before manipulation. Same goes for sprite off top of the screen.
Sidenote: What I wanted to do, and probably You wanted it too, is to have sprites being able to move on/off screen in all diretictions. Well, You could use the translate property of the parent container to the canvas to achieve this. If You set the translate y property to a negative value, the stage will be shifted upwards, so You could place things over the top. But this just decreases the viewing area, the top of the stage disappears from view, and the canvas just moves upwards on the screen.
Using scaleX and scaleY for the canvas at the same time, with the same numbers, will zoom in or out the on the canvas. Using a scale factor of 2 or 3 could possibly be a very elegant solution to the whole problem. I’ll try that out. Will report back again.
1 Like
Well, it is me again. Even if the username has changed. Zooming in with scaleX and scale Y on the canvas was the workaround. I zoomed in on the canvas with a factor of 2.5 by using scale (in style, andavnced). Then doubled the size of the stage to w/h 600x900.
Placed a centered rectangle with x/y 300/450 by making a sprite on stage. Height 540, width 242,or close to those two. Now I have a centered rectangle on the stage, representing the screens view area. and can place and move sprites into and out of this 'playground.
It’s too late in the night here to give a more detalied description. Will be back tomorrow.
3 Likes
Awesome! I can’t wait to try it out 