Side-scroller demo project

314 views
Skip to first unread message

Scott Ferguson

unread,
Aug 31, 2015, 11:07:22 PM8/31/15
to app-inventor-de...@googlegroups.com

http://static.pablofarias.com/sidescroller/This project uses a method to make a side-scroller game.
The idea is based on Pablo Farias Navarro's tutorial 'How to Make a Sidescroller Game with HTML5'.


It has been tested on a 10" tablet (ASUS TF-101) and a 7" tablet (Montster M7) with good results.


The method:


The entire Canvas is moved across the device screen by changing the size of a spacer HorizontalArrangement.

Simple, but effective!


Each ImageSprite on the canvas is treated as being one of three types of 'prop' (as in a stage prop).


platform - hero character slides across these and can jump from them also

coin - hero collects coins

wall - if he touches a wall, he dies, but he can either jump over short walls or duck under wall openings to avoid touching them


In addition, there are ravines which must be jumped over; if the hero character touches the bottom of the canvas, he will die.


Read the documentation in the project for more details.


AIA and APK files attached.

If your device allows side-loading apk's you can install the app from here if you don't want to have to build the apk from inside App Inventor.


Background theme 'Monotony 1H69' courtesy of Setuniman on freesound.org under the Attribution, Noncommercial license.

All other assets are public domain.


Creating a level:


A sprite sheet was provided in the original HTML5 tutorial containing 70x70px tiles.



While playing the game created in that tutorial, I took some screenshots then determined how large to make the Canvas for the AI version.

His game level was about 50 tiles wide and 6 tiles high which gave me the 3500x420 Canvas dimensions.



I used GIMP image editor, but there is a Tiled Map Editor 'Tiled' that you may want to take a look at. 


The levels in the AI game use a Canvas set to 3500x420.

This is broken up into a grid of 70x70 which is a grid 50 tiles wide and 6 tiles high.


I saved the needed tiles from the spritesheet as separate files.

In the picture above you see three vertical triangle blocks.

I created a single image with the three blocks to make one sprite rather than making three separate sprites.

I did this for any continuous block of ground or wall surfaces.

It reduced the number of ImageSprites required.


I created a template in GIMP to layout the created images then placed the images in separate layers over the template:


This formed a simple map editor.



I placed horizontal and vertical guide lines on the map editor to align the tiles to the grid.


Once the layout was complete, I entered the required information in the game's CSV table for the level.


0,5,platform,grass630.png\n

:

46,1,wall,eblock3up.png\n

:

39,1,coin,coin.png


The first two numbers are the grid column,row values.

These are multiplied by 70 in the app when placing an ImageSprite prop at it's x,y location on the Canvas.


The third item is the type of prop as described above.


The fourth item is the name of the image used for the ImageSprite prop which is stored in the Media folder.


All rows in a CSV table must end in \n unless it is the last row in the table.

You can see the data for two levels in the ScenesProp list in the app.


I am not a game-maker so the second level barely works, but it does show how more levels can be added to the project.

---

sf


SideScroller.aia
SideScroller.apk

Taifun

unread,
Sep 1, 2015, 12:05:33 PM9/1/15
to App Inventor Developers Library
wow! this is amazing!
testing with the companion app on Nexus 5 I get a full screen scrolling canvas, see screenshot without being able to see the 2 buttons below?
to fix this I now added the events directly in SceneCanvas and can touch directly SceneCanvas to move the hero...
Taifun





Scott Ferguson

unread,
Sep 1, 2015, 3:09:53 PM9/1/15
to App Inventor Developers Library
That is a great idea -- a definite improvement for smaller devices.
It would be nice to have the level and coins counter display at the top of the SceneCanvas as well. 
Someone could modify it to work on smaller phones as well, I suppose.
---
sf

M. Hossein Amerkashi

unread,
Sep 1, 2015, 8:02:41 PM9/1/15
to app-inventor-de...@googlegroups.com
Scott, I built, installed on LG G3 with Android 5. However, it crashes as soon as I select "Yes" on Notifier.

-Hossein

--
(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/d/optout.

Scott Ferguson

unread,
Sep 2, 2015, 8:06:48 AM9/2/15
to App Inventor Developers Library
Thanks for testing it, Hossein.
I am running older versions of Android (4.03, 4.11)
I wonder if that isssue is specific to Android 5?
Do you know which package/api supports the Notifier component?
I could investigate if any other Android developers are having issues with it.
---
sf
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-developers-library+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages