Cityscape scroller demo

[Scott Ferguson]

YouTube video: http://youtu.be/TWiEDvmnMd0

---

2014-01-12: Added Designer images and captions to this documentation

---

This demo is based on an MIT Scratch project 3D Cityscape that I modified to make the car wheels rolling match the scrolling speed.

In it I observed that four ImageSprites made up the cityscape which scrolls in two rows at different speeds.

After trying different methods of doing this with App Inventor, I arrived at this solution.

It uses two rows of three ImageSprites each to make the scrolling cityscape - each row moving at a different speed.

The wheels of the car in the foreground move fastest and determine the speed of the two rows of buildings.

A slider component allows changing the speed and direction of the rolling car.

Sound track: Bee Gees - Stayin' Alive (midi)

Building images courtesy of the developer of the Scratch 3D Cityscape applet.

The midi file was cropped and exported from Anvil Studio 2013 as a wav file, then exported from Audacity as an ogg (much smaller).

GIMP was used to create the ImageSprite Pictures and the Canvas BackgroundImage.

Testing was done on a 10" ASUS TF-101 and 7" $69 Nextbook.

The app works either in Landscape or Portrait mode.

The method I used here to allow scrolling uses half of the Canvas to hide the ImageSprites under left and right mask ImageSprites.

The Canvas Width is 480px and Height is 170px.

Each of the building ImageSprites is 120px wide and there are always three in a row.

So 360px of the Canvas are always occupied, but there can be up to 120px on the left or the right where ImageSprites are swapped as the scene scrolls.

This area is masked on the left and right with the maskL and maskR ImageSprites which are each 120px wide.

So as the scene scrolls, the viewer sees only the buildings moving but not the swapping that is happening under the mask ImageSprites.

I found out that the Canvas can extend beyond the width of the screen. Did you know that? I didn't.

To see this in action, start this app then turn the device first landscape then portrait orientation.

In portrait orientation, only part of the Canvas edges are visible, and the canvas width of 480px is maintained.

That opens up some possibilities for improved horizontal scrolling.

When I did this project I assumed that nothing could extend beyond the screen border.

The ability to extend the Canvas beyond the Screen Width is evident in the fact that the mask gray areas used to hide the swapped ImageSprites on the left and right can be outside of the viewable area of the screen.

Yes, it is true that an ImageSprite is not allowed to move beyond the edge of the Canvas, but since the Canvas can extend beyond the edge of the Screen then that means we can move ImageSprites off screen and have them appear on the other side in a natural way.

We just need to make the Canvas wider than the Screen Width and allow enough room for the ImageSprite to move off Screen.

To the user of the app they are viewing the entire Canvas, however.

DESIGNER

All component properties can be observed in the aia project Designer.

I will not reproduce them here.

The Viewer Screen is set to landscape orientation here for demonstration purposes to see the entire canvas, but in the project orientation is set to unspecified.

The Canvas contains a BackgroundImage containing the sun, sky ground and blacktop road.

There are three Pictures shared by all six ImageSprites that make up the front and back rows of buildings.

Of the three back row ImageSprites two are shown here to get an idea of size and position.

Their heights are shorter than the front row buildings heights.

Their Z Properties are 1.0 which means that they are at the lowest level in the scene.

There are three front row ImageSprites.

Two are shown in the normal height of their contained Pictures.

Their Z Properties are 2.0 which places them in front of the back row which contains one ImageSprite in this example.

The car ImageSprite is displayed above the buildings at Z = 200.

The tires don't turn.

The rims for the wheels are ImageSprites with Z = 300.

They will turn as the scene moves left or right.

The mask ImageSprites are added to the left and right sides of the Canvas.

They hide the fact that the buildings don't extend to the end of the Canvas and allow swapping of Images from one side to the other.

Their Z = 500.

A HorizontalArrangement containing Slider component and a Label to hold it's current value is placed below the Canvas.

Next, a HorizontalArrangement containing buttons is placed.

Once the start button is pressed, it is hidden.

All components visible.

BLOCKS

---

END

[M. Hossein Amerkashi]

Great job Scott

-Hossein.

---

END

--
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Scott Ferguson]

Thanks, Hossein :)

Although I have often said in the past that I have a 'work around' for something that App Inventor does not appear able to do in a simple way, it is times like this that make me realize that there are features that are still untapped and waiting to be discovered.

---

Scott

Great job Scott

-Hossein.

To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-developers-library+unsubscribe@googlegroups.com.

[Zoran Kukulj]

I agree, really nice job, Scott. All the best wishes, lots of health and success in 2014. to all!

2014/1/12 Scott Ferguson <scottfr...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.

[Taifun]

great example! 

I found out that the Canvas can extend beyond the width of the screen. Did you know that? I didn't.

We just need to make the Canvas wider than the Screen Width and allow enough room for the ImageSprite to move off Screen. 

I didn't know that... good to know!

it seems to be, there are still things undiscovered ;-)

Taifun

[Sebastián Segovia]

Lol good idea jajaja.

[Josh @ MIT]

Wow - super cool example Scott!

On Sunday, January 12, 2014 11:11:33 AM UTC-5, Taifun wrote:

it seems to be, there are still things undiscovered ;-)

Taifun

This is also a nice thing to remember in our hyper-modern world :-) 

[gian luca Pasciuto]

Hello the file. aia does not work, you do not load the blocks in the blok editor. You can send me the new file .aia?

Il giorno sabato 11 gennaio 2014 16:46:25 UTC+1, Scott Ferguson ha scritto:

YouTube video: http://youtu.be/TWiEDvmnMd0

---

2014-01-12: Added Designer images and captions to this documentation

---

This demo is based on an MIT Scratch project 3D Cityscape that I modified to make the car wheels rolling match the scrolling speed.

In it I observed that four ImageSprites made up the cityscape which scrolls in two rows at different speeds.

After trying different methods of doing this with App Inventor, I arrived at this solution.

It uses two rows of three ImageSprites each to make the scrolling cityscape - each row moving at a different speed.

The wheels of the car in the foreground move fastest and determine the speed of the two rows of buildings.

A slider component allows changing the speed and direction of the rolling car.

Sound track: Bee Gees - Stayin' Alive (midi)

Building images courtesy of the developer of the Scratch 3D Cityscape applet.

The midi file was cropped and exported from Anvil Studio 2013 as a wav file, then exported from Audacity as an ogg (much smaller).

GIMP was used to create the ImageSprite Pictures and the Canvas BackgroundImage.

Testing was done on a 10" ASUS TF-101 and 7" $69 Nextbook.

The app works either in Landscape or Portrait mode.

The method I used here to allow scrolling uses half of the Canvas to hide the ImageSprites under left and right mask ImageSprites.

The Canvas Width is 480px and Height is 170px.

Each of the building ImageSprites is 120px wide and there are always three in a row.

So 360px of the Canvas are always occupied, but there can be up to 120px on the left or the right where ImageSprites are swapped as the scene scrolls.

This area is masked on the left and right with the maskL and maskR ImageSprites which are each 120px wide.

So as the scene scrolls, the viewer sees only the buildings moving but not the swapping that is happening under the mask ImageSprites.

I found out that the Canvas can extend beyond the width of the screen. Did you know that? I didn't.

To see this in action, start this app then turn the device first landscape then portrait orientation.

In portrait orientation, only part of the Canvas edges are visible, and the canvas width of 480px is maintained.

That opens up some possibilities for improved horizontal scrolling.

When I did this project I assumed that nothing could extend beyond the screen border.

The ability to extend the Canvas beyond the Screen Width is evident in the fact that the mask gray areas used to hide the swapped ImageSprites on the left and right can be outside of the viewable area of the screen.

Yes, it is true that an ImageSprite is not allowed to move beyond the edge of the Canvas, but since the Canvas can extend beyond the edge of the Screen then that means we can move ImageSprites off screen and have them appear on the other side in a natural way.

We just need to make the Canvas wider than the Screen Width and allow enough room for the ImageSprite to move off Screen.

To the user of the app they are viewing the entire Canvas, however.

[Scott Ferguson]

I emailed a copy to you.

---

Scott

[Tafika Nathan Rasoarison]

Hi! Thank you very much for this great app and for the tutorial.

I just have one question: I dont know if it is stupid but still I will ask

How to you set up the TimerInterval of each row?

Thanks

[Scott Ferguson]

How to you set up the TimerInterval of each row?

It has been a while since I did this so let me see if I can help.

There are seven Clocks -- three for the front row, three for the back row, and one for the car's wheels.

All Clock Intervals are set to 0 and disabled in the Screen Designer.

All Clocks are started with the StartButton.

Once running, the clock Timers keep each ImageSprite moving the correct amount - swapping them left or right as needed

The distance argument of RowMove adjusts the number of pixels each ImageSprite moves relative to the speed of the car's wheels.

The back row multiplier is smaller than the front row multiplier since it should move slower.

Honestly, looking at it now it is a bit confusing at first glance.

I think you should look at a simpler example to start with and it may meet your needs.

See the FlappyBat side-scroller demo: https://groups.google.com/forum/#!searchin/app-inventor-developers-library/Flappy$20bat/app-inventor-developers-library/GAoAzI6mDT0/sPSzeK_mbU8J

---

Scott

[Tafika Nathan Rasoarison]

Thanks a lot