Scrolling horizontally in the App Designer

45 views
Skip to first unread message

Mage Justice

unread,
Feb 11, 2019, 5:11:23 PM2/11/19
to mitappinv...@googlegroups.com
Hello,

I am creating a large role playing game map, similar to the game design of Pokemon, but in the style of Dungeons and Dragons. In the App Inventor Designer page, I am trying to place a large image (maybe 5000-9000 pixels) of the map, which extends way off the actual screen, and I need to code in virtual walls. To move down vertically, it is very easy (using the scrolling feature of the screen). However, I also need to move the Designer horizontally to access all of the image (to code in walls). How do I do this? Any other suggestions on how I might approach the problem?

Thanks,
Mage Justice

Edit: Am I on the wrong forum?

ABG

unread,
Feb 12, 2019, 9:59:54 AM2/12/19
to MIT App Inventor Forum
See the Canvas Larger Than Screen post in the Canvas section of FAQ

The Ferguson library has more examples like that.

Try to keep data out of the Designer and the Blocks Editor.

It's like keeping food off the factory floor.

ABG

Mage Justice

unread,
Feb 12, 2019, 11:09:55 AM2/12/19
to MIT App Inventor Forum
Ok thanks. Is there a way to control the field of view on a larger canvas?
For example moving the field of view to the left when the user clicks on the right side of the screen.

ABG

unread,
Feb 12, 2019, 11:53:16 AM2/12/19
to MIT App Inventor Forum
You will probably have to break that big image up into tiles,
and keep vertical and horizontal offsets into an
array (grid) of them to decide which tile(s) to show.

You will encounter extra work to accommodate different size devices
if you want to sell your app.

You might be able to simulate dragging a Canvas by showing a
phalanx of image sprites on a low Z value for a background,
and sliding them in unison in a Sprite dragged event.

I have read that the Canvas can reach 3 times the
Screen size if you center it in the Screen.

I generally avoid images, and generate my own Canvas lines and text on the fly.

Maybe a more enthusiastic graphics fan can chime in here.

ABG

Mage Justice

unread,
Feb 12, 2019, 12:38:27 PM2/12/19
to MIT App Inventor Forum
Hm. I am trying to understand what you mean by: "
You might be able to simulate dragging a Canvas by showing a
phalanx of image sprites on a low Z value for a background,
and sliding them in unison in a Sprite dragged event."
Can I control where the screen goes though? For example moving the screen around the canvas. Or would I have to use moving image sprites (sprites a grid, sprites together form the larger image of the map). I have tried doing this with only one image, and it just isn't working.

ABG

unread,
Feb 12, 2019, 4:07:20 PM2/12/19
to MIT App Inventor Forum
My suggestion was speculative, not backed by hard experience.

For working examples, see the Ferguson Library in the Books and Tutorials section of the FAQ


The attached project is as close to what you want as anything 
I've seen in action.

ABG


SideScrollingMoving3xCanvas.aia
Reply all
Reply to author
Forward
0 new messages