how do I use touch events to drop sprites and then add a controller to them

Help, Is it possible to use the touch event to create (already made) sprites on the screen where I touch the screen (much like drawing the "ball in the tutorial')
but then have each touch given a value (like sprite (1), then another touch results with sprite (2), then another touch triggers, sprite (3) and so on.
Then I would like these sprites which should all be different variable be able to do simple things .
--One would be store location its local in a database so I can redraw it on the screen later,  ( I know how to connect database to the app inventor already)
--Another feature would be to have a sprite that has a touch event put on it to trigger a function (when you press the you created on the screen it triggers an event)

So far all I have found in the tutorials is that I can upload a sprite and put it on the screen , or I can use the draw function to leave dots on the screen. I have no clue how to give either one of those things an assigned variable and I have no idea how I can trigger evens to those sprites I create (simple counter, or an alert or event) .
Of course I see how events are tied to these classes (?), but how does one assign the sprite after its initially created?

Any help would be great, you just have to point me in the general direction . Thanks !

--

If you have not read this, http://www.appinventor.org/bookChapters/chapter17.pdf  , do so now.   The chapter explains screen coordinates.

Yes, it is possible to get the screen coordinates by touching the screen... you can get the screen coordinates by using the Canvas controls  and also get a Sprites coordinates by touching the sprite.   This can get complicate.  Yes, you can capture the coordinates and store them.

What you can do with the Sprites and Canvas are summarized here:  Drawing and Animation Components - App Inventor for Android  

To do most (if not all) of the other things, read in the same eBook the chapters 14 to 22.

Now you need to try some blocks and experiment with a small, new Project.   Put a Canvas on the screen, put a Sprite into the Canvas and an image into Media to use with your sprite.

--

Thank you for the information. I did previously read the screen coordinates and how to capture them, and I also read some Database stuff that expands that technique so that I can store and retrieve them.

And yes I have already put a sprite onto a canvas. There was a tutorial on how to tap the screen and make a circle. The circle was defined/ created by grabbing there x,y coordinates and putting a radius where your finger hits the canvas... O totally understand that.

But what I dont understand how to assign a value to sprite (1) the first tap and then to sprite (2) the second and so on. Of course I am looking to build an array that stores the original tap down location to sprite(1) and sprite (2) and the rest of them.

So I am hoping for the tutorial or information that comes after I follow these two. An example of what I want to create could be a sprite of a foot print. Each step signifies a step. I may retap or reposition any footstep after its created by tapping (?) that tap on the newly created sprite would trigger an event (lets just say each footstep put down counts on the screen and if you tap it it goes away and the count goes down. ) Once Im happy with the amount of footprints I put down, the file is saved to the db so that the sprites can just be put assigned there without tapping (it is recreated) .

I know that is a terrible example but I really dont understand how to take the canvas to sprite to the next level. How does one assign variables to create the new sprites and where can I find the information on that. The current link you sent me doesnt actually demonstrate that, instead it allows sprites on screen to move, and have events set on them.  (like the billard balls) but those are sprites that are individually predefined, not copies that are given a sequential id .

But just so we are clear I really appreciate you answering this and taking the time to do so, its my fault for not being specific, but only 1/2 of my question has been answered, Im looking to see if the hard part can be done with app inventor. (otherwise Im going to just write some android code )

--

1) you can not create sprites with code, you can only make sprites that already exist appear and disappear.   For instance, you can have a right foot and left foot sprite and display them alternately.. however, if you want to show the foot print tracks... you need a sprite image for EACH of the sprites you display.

2) Keeping track of sprites:   You probably can use the Any component blocks

to make the sprite "walk"          Yes, you can hide the footprint    Sprite.Visible = false.

When you use the code shown previously in this thread ...that shows where you touched,  capture that information to a list or a text file.

I can't write your app for you.    Making a counter is easy ...you could  search in the forum using the Search for topics box to the right of the colorful google at the top of this page for  counter  .  You will need a variable to keep track of the "taps."    Sprites have Touched, TouchedUp and TouchedDown event handlers ; put the code you want to execute when an event happens.  I believe it is possible to do most, if not all, you say you want to do with app inventor.   You have to try, the tools are there to store and recall information. Can AI2 do everything you want?  I do not know.   Try Eclipse or Android Studio.  They can do more than AI but use Java..most users find AI2 significantly easier to use, however it's tool box is limited.  

What code have you written so far?   The way to learn to do this is the way I and others learned...by experimenting.  There is no tutorial showing how to do exactly what you want to do.

--

Drawing and Animation Components - App Inventor for Android

Table of Contents

⦁ Ball

⦁ Canvas

⦁ ImageSprite

Ball

A round 'sprite' that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites (ImageSprites and other Balls) and the edge of the Canvas, and move according to its property values.

For example, to have a Ball move 4 pixels toward the top of a Canvas every 500 milliseconds (half second), you would set the Speed property to 4 [pixels], the Interval property to 500 [milliseconds], the Heading property to 90 [degrees], and the Enabled property to True. These and its other properties can be changed at any time.

The difference between a Ball and an ImageSprite is that the latter can get its appearance from an image file, while a Ball's appearance can only be changed by varying its PaintColor and Radius properties.

Properties

Enabled

Controls whether the sprite moves when its speed is non-zero.




Heading

Returns the sprite's heading in degrees above the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward the top of the screen.




Interval

The interval in milliseconds at which the sprite's position is updated. For example, if the interval is 50 and the speed is 10, then the sprite will move 10 pixels every 50 milliseconds.




PaintColor




Radius




Speed

The speed at which the sprite moves. The sprite moves this many pixels every interval.




Visible

True if the sprite is visible.




X

The horizontal coordinate of the left edge of the sprite, increasing as the sprite moves to the right.




Y

The vertical coordinate of the top of the sprite, increasing as the sprite moves down.




Z How the sprite should be layered relative to other sprits, with higher-numbered layers in front of lower-numbered layers.

Events

CollidedWith(component other)

Handler for CollidedWith events, called when two sprites collide. Note that checking for collisions with a rotated ImageSprite currently checks against the sprite's unrotated position. Therefore, collision checking will be inaccurate for tall narrow or short wide sprites that are rotated.




Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY)

Handler for Dragged events. On all calls, the starting coordinates are where the screen was first touched, and the "current" coordinates describe the endpoint of the current line segment. On the first call within a given drag, the "previous" coordinates are the same as the starting coordinates; subsequently, they are the "current" coordinates from the prior call. Note that the Sprite won't actually move anywhere in response to the Dragged event unless MoveTo is specifically called.




EdgeReached(number edge)

Event handler called when the sprite reaches an edge of the screen. If Bounce is then called with that edge, the sprite will appear to bounce off of the edge it reached. Edge here is represented as an integer that indicates one of eight directions north(1), northeast(2), east(3), southeast(4), south (-1), southwest(-2), west(-3), and northwest(-4).




Flung(number x, number y, number speed, number heading, number xvel, number yvel)

When a fling gesture (quick swipe) is made on the sprite: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector.




NoLongerCollidingWith(component other)

Event indicating that a pair of sprites are no longer colliding.




TouchDown(number x, number y)

When the user begins touching the sprite (places finger on sprite and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas




TouchUp(number x, number y)

When the user stops touching the sprite (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas




Touched(number x, number y)

When the user touches the sprite and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas

Methods

Bounce(number edge)

Makes this sprite bounce, as if off a wall. For normal bouncing, the edge argument should be the one returned by EdgeReached.




boolean CollidingWith(component other)

Indicates whether a collision has been registered between this sprite and the passed sprite.




MoveIntoBounds()

Moves the sprite back in bounds if part of it extends out of bounds, having no effect otherwise. If the sprite is too wide to fit on the canvas, this aligns the left side of the sprite with the left side of the canvas. If the sprite is too tall to fit on the canvas, this aligns the top side of the sprite with the top side of the canvas.




MoveTo(number x, number y)

Moves the sprite so that its left top corner is at the specfied x and y coordinates.




PointInDirection(number x, number y)

Turns the sprite to point towards the point with coordinates as (x, y).




PointTowards(component target)

Turns the sprite to point towards a designated target sprite. The new heading will be parallel to the line joining the centerpoints of the two sprites.

Canvas

A two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved.

The BackgroundColor, PaintColor, BackgroundImage, Width, and Height of the Canvas can be set in either the Designer or in the Blocks Editor. The Width and Height are measured in pixels and must be positive.

Any location on the Canvas can be specified as a pair of (X, Y) values, where
⦁ X is the number of pixels away from the left edge of the Canvas
⦁ Y is the number of pixels away from the top edge of the Canvas

.There are events to tell when and where a Canvas has been touched or a Sprite (ImageSprite or Ball) has been dragged. There are also methods for drawing points, lines, and circles.

Properties

BackgroundColor

The color of the canvas background.




BackgroundImage

The name of a file containing the background image for the canvas




FontSize

The font size of text drawn on the canvas.




Height




LineWidth

The width of lines drawn on the canvas.




PaintColor

The color in which lines are drawn




TextAlignment

Determines the alignment of the text drawn by DrawText() or DrawAngle() with respect to the point specified by that command: point at the left of the text, point at the center of the text, or point at the right of the text.




Visible

Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden.

Width

Events

Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY, boolean draggedSprite)

When the user does a drag from one point (prevX, prevY) to another (x, y). The pair (startX, startY) indicates where the user first touched the screen, and "draggedSprite" indicates whether a sprite is being dragged.




Flung(number x, number y, number speed, number heading, number xvel, number yvel, boolean flungSprite)

When a fling gesture (quick swipe) is made on the canvas: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector. The value "flungSprite" is true if a sprite was located near the the starting point of the fling gesture.




TouchDown(number x, number y)

When the user begins touching the canvas (places finger on canvas and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas




TouchUp(number x, number y)

When the user stops touching the canvas (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas




Touched(number x, number y, boolean touchedSprite)

When the user touches the canvas and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas. TouchedSprite is true if the same touch also touched a sprite, and false otherwise.

Methods

Clear()

Clears anything drawn on this Canvas but not any background color or image.




DrawCircle(number x, number y, number r)

Draws a circle (filled in) at the given coordinates on the canvas, with the given radius.




DrawLine(number x1, number y1, number x2, number y2)

Draws a line between the given coordinates on the canvas.




DrawPoint(number x, number y)

Draws a point at the given coordinates on the canvas.




DrawText(text text, number x, number y)

Draws the specified text relative to the specified coordinates using the values of the FontSize and TextAlignment properties.




DrawTextAtAngle(text text, number x, number y, number angle)

Draws the specified text starting at the specified coordinates at the specified angle using the values of the FontSize and TextAlignment properties.




number GetBackgroundPixelColor(number x, number y)

Gets the color of the specified point. This includes the background and any drawn points, lines, or circles but not sprites.




number GetPixelColor(number x, number y)

Gets the color of the specified point.




text Save()

Saves a picture of this Canvas to the device's external storage. If an error occurs, the Screen's ErrorOccurred event will be called.




text SaveAs(text fileName)

Saves a picture of this Canvas to the device's external storage in the file named fileName. fileName must end with one of .jpg, .jpeg, or .png, which determines the file type.




SetBackgroundPixelColor(number x, number y, number color)

Sets the color of the specified point. This differs from DrawPoint by having an argument for color.

ImageSprite

A 'sprite' that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites (Balls and other ImageSprites) and the edge of the Canvas, and move according to its property values. Its appearance is that of the image specified in its Picture property (unless its Visible property is False.

To have an ImageSprite move 10 pixels to the left every 1000 milliseconds (one second), for example, you would set the Speed property to 10 [pixels], the Intervalproperty to 1000 [milliseconds], the Heading property to 180 [degrees], and the Enabled property to True. A sprite whose Rotates property is True will rotate its image as the sprite's Heading changes. Checking for collisions with a rotated sprite currently checks the sprite's unrotated position so that collision checking will be inaccurate for tall narrow or short wide sprites that are rotated. Any of the sprite properties can be changed at any time under program control.

Properties

Enabled

Controls whether the sprite moves when its speed is non-zero.




Heading

Returns the sprite's heading in degrees above the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward the top of the screen.




Height




Interval

The interval in milliseconds at which the sprite's position is updated. For example, if the interval is 50 and the speed is 10, then the sprite will move 10 pixels every 50 milliseconds.




Picture

The picture that determines the sprite's appearence




Rotates

If true, the sprite image rotates to match the sprite's heading. If false, the sprite image does not rotate when the sprite changes heading. The sprite rotates around its centerpoint.




Speed

The speed at which the sprite moves. The sprite moves this many pixels every interval.




Visible

True if the sprite is visible.




Width




X

The horizontal coordinate of the left edge of the sprite, increasing as the sprite moves to the right.




Y

The vertical coordinate of the top of the sprite, increasing as the sprite moves down.




Z

How the sprite should be layered relative to other sprits, with higher-numbered layers in front of lower-numbered layers.

Events

CollidedWith(component other)

Handler for CollidedWith events, called when two sprites collide. Note that checking for collisions with a rotated ImageSprite currently checks against the sprite's unrotated position. Therefore, collision checking will be inaccurate for tall narrow or short wide sprites that are rotated.




Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY)

Handler for Dragged events. On all calls, the starting coordinates are where the screen was first touched, and the "current" coordinates describe the endpoint of the current line segment. On the first call within a given drag, the "previous" coordinates are the same as the starting coordinates; subsequently, they are the "current" coordinates from the prior call. Note that the Sprite won't actually move anywhere in response to the Dragged event unless MoveTo is specifically called.




EdgeReached(number edge)

Event handler called when the sprite reaches an edge of the screen. If Bounce is then called with that edge, the sprite will appear to bounce off of the edge it reached. Edge here is represented as an integer that indicates one of eight directions north(1), northeast(2), east(3), southeast(4), south (-1), southwest(-2), west(-3), and northwest(-4).




Flung(number x, number y, number speed, number heading, number xvel, number yvel)

When a fling gesture (quick swipe) is made on the sprite: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector.




NoLongerCollidingWith(component other)

Event indicating that a pair of sprites are no longer colliding.




TouchDown(number x, number y)

When the user begins touching the sprite (places finger on sprite and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas




TouchUp(number x, number y)

When the user stops touching the sprite (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas




Touched(number x, number y)

When the user touches the sprite and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas

Methods

Bounce(number edge)

Makes this sprite bounce, as if off a wall. For normal bouncing, the edge argument should be the one returned by EdgeReached.




boolean CollidingWith(component other)

Indicates whether a collision has been registered between this sprite and the passed sprite.




MoveIntoBounds()

Moves the sprite back in bounds if part of it extends out of bounds, having no effect otherwise. If the sprite is too wide to fit on the canvas, this aligns the left side of the sprite with the left side of the canvas. If the sprite is too tall to fit on the canvas, this aligns the top side of the sprite with the top side of the canvas.




MoveTo(number x, number y)

Moves the sprite so that its left top corner is at the specfied x and y coordinates.




PointInDirection(number x, number y)

Turns the sprite to point towards the point with coordinates as (x, y).




PointTowards(component target)

Turns the sprite to point towards a designated target sprite. The new heading will be parallel to the line joining the centerpoints of the two sprites.

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License

© 2012-2013 Massachusetts Institute of Technology