AI2 Inventor Forum News: 08/12/17

2017년 8월 12일 토요일

A Canvas - Sprite Bug or Feature...disappearing sprites

Place two sprites on a Canvas (300x300). Each sprite is 50x50. Enable the ImageSprite.Dragged for both sprites. Let the sprites have different origins. See the sheep and turtle below. Use your finger to move the turtle towards the sheep. As the turtle approaches the sheep when still dragging with your finger, the edge of the sprite touches the sheep sprite and kabam ... the sheep disappears. Not really, the sheep sprite is under the turtle. A small test program demonstrates that both icons are present at the same location in the second screen image.

What I think should happen is that the turtle should pass through the sheep and smile as it moseys along. It does not. At worst I would think that I could position the two sprites so they overlap...I can not do that either.

Any ideas as how to allow the turtle to pass through the sheep or a way to disable the sheep Dragged while the turtled Dragged still works? I have tried this both on a 7" tablet and the emulator. Same results.

this is called sprite cannibalism ;-)

see also here How to avoid ImageSprite cannibalism and what you can do to avoid it

Works perfectly. Thanks for the link to Scotts example Taifun!

How to avoid ImageSprite cannibalism

Update 2015/12/07: The extra ImageSprite is not needed. Just assign an empty text block to CurrentISP instead of using PlaceholderISP in the TouchUp blocks

YouTube video: App Inventor - avoiding sprite cannibalism

When more than one ImageSprite can be dragged on a Canvas, unless precautions are taken beforehand they may get 'stuck' together.

This is referred to as ImageSprite cannibalism.

This App Inventor project demonstrates a simple method to prevent this from happening using an ice hockey rink example.

A global variable, an extra ImageSprite and a couple of if blocks enable only one of two ImageSprites to be dragged at a time:

ImageSpriteCannibalism.aia

Drag Image sprite is flashing. Why ?

I have 0 Heading, 100 Interval and 0 Speed of image sprite. When i change speed (5,10,100,etc.) of image sprite, the image sprite not keep the coordinates and when is dragged is moving alone, to other coordinates.
I cant change the heading. Is another way ?

Re: Image sprite speed problem ?

If you change the speed, of course is not going to keep the coordinates, because now that it has speed, it's moving, so the coordinates are being updated constantly.

To change the heading, use the SET ImageSprite.Heading to (any value from 0 to 360).

Re: Image sprite speed problem ?

Also post your blocks so we can see what you are trying to do.

Re: Image sprite speed problem ?

When i change speed (5,10,100,etc.) of image sprite, the image sprite not keep the coordinates

why do you change the speed of the sprite if you do not want to move it?

and when is dragged is moving alone, to other coordinates.

it seems to be, you are using an ImageSprite.Dragged event? how does it look like? any screenshot?

I cant change the heading. Is another way ?

another way to do what?

Re: Image sprite speed problem ?

Italo & Taifun
You have right both. Not speed is the problem because is dragged, and speed it should be 0.
My problem is and i thougt is speed, because when i drag image and change coordinates of image 1 with image 2, they flashing, like they cant switch places, but if you drag quicly they switch places. When i drag i want to change places quickly and do not flashing.
I use Italo formula.

Re: Image sprite speed problem ?

I put an exemple.aia of my project. What is wrong. Why flashing when change places ?

Example.aia

Re: Image sprite speed problem ?

Example.aia

You don't have images for your sprite pictures.

How do you expect to see them?

Ok. I put pictures in.

Example.aia

Why flashing when change places ?

The drag event fires multiple times as you drag.

Each time it fires, your sprites switch images, hence the flashing.

You can avoid the flashing by saving the swap for the TouchUp event, and

just moving the dragged sprite to currentX,Y in the Dragged event.

Remembering the original X and Y of the dragged sprite for the later swap is more complicated than I can answer in this post.

See attached for how to do a drag and swap for just two sprites.

For more than two sprites, extra blocks would be needed to

calculate which of the sprites on the list is closest to the sprite being dragged,

both for the final swap and for a visual signal that it will be swapped.

drag_and_swap.aia

I try to add more sprites but didnt work. I have 9 sprites.

Post an .aia export?

--

I will like to thank you very much for your time and help. I try to make it but something is wrong and all pieces come together. I put an aia example.I dont need a reset button. Thank you very much.

drag_and_swap_v2.aia

Your dragging app was complicated by sprite cannibalism, which you can find in this forum's search box.

The dragged_sprite and dragging global variables prevent sprite cannibalism.

The trick to this app is to keep a list of all the sprites, and on a sprite's Touch Up event,

look through the list to find which (if any) sprite it overlaps best for the swap.

Since all your sprites are rectangular and in a grid, and not overlapping, the target sprite

for a swap can be uniquely determined by locating which rectangle holds the center of the dragged sprite.

It might be possible to simplify this app by taking advantage of two new globals added at the start of a drag,

to eliminate the need for TinyDB.

In the meanwhile, here's a working version.

drag_and_swap_v3.aia

Thank you very much. I start my apk with App Inventor (beginner level) in a way and when almost it was finish, i have to make another from 0. :)
Your way is better and now has more stile and it almost new apk. My first vs has multiple screen and when i close it has error, my apk dont want to close. Now vs2 i try to make with 1 screen. This is my first complicated apk. When i finish that, i start a new one. I have a lot of idees and i hope to make it work.
Thank you very much for your time and help. I hope you can help another time. You can close this topic.

--

We can save the positions of this sprite ? I mean when we close the screen, the images sprites from canvas to stay saved or if not to make a saved button. Thank you for your help and support.

The app I posted saves the sprite positions in TinyDB after every move, but

it starts fresh fro the Designer sprite positions in Screen1.Initialize,

and wipes out the previous (one and only one) save.

To get the sprite positions to persist across runs of the app,

the simplest way would be to add to Screen1.Initialize a new procedure call

to load_all, a procedure to move all sprites to the position saved for

that sprite in TinyDB, only if the tags are already in TinyDB already.

Do this TinyDB tag check before the save_all call.

You can make the load_all procedure quickly by copying the save_all procedure and its children

(if necessary) and editing them.

Hello, thank you for your help. I try like you said but i didn't make it. Something i do wrong.

drag_and_swap_v4.aia

See attached for the 4 places you need to fix.

Sorry, dont work. What it is wrong ?

drag_and_swap_v4.aia

Please clip and post images of the four procedures I gave you,

as you implemented.

Attached is a working copy.

If it starts with blocks in the wrong place because of residue from experiments in TinyDB, clear TinyDB for a fresh start.

drag_and_swap_v4.aia

Thanks, you have perfectly right. I dont doubt of you for a moment. Thank you very much. My apk is almost finish. Thank you and bless you.

My app is multiscreen and i put some buttons and something is not good. My blocks from screen 2 not keep positions. On my app when i swap of Images sprites in screen1 and change screen in screen 2 they have the same position like in screen 1. They swap in the same time when i drag from screen2. Is the positions of the block quilty ?

drag_and_swap_v5.aia

This app does not need multiple screens.

Why did you add them?

This is just an example. I making a puzzle that why is easy to make with multiscreen.

See this Where's MIT app on the Gallery

ai2.appinventor.mit.edu/?galleryId=6367403443486720

and take a guess how many screens it needed.

For more advice on Screens, see the Screens section of this FAQ:

https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/mitappinventortest/2cd6Uz__xA0/cPQSiZpcDAAJ

also

http://ai2.appinventor.mit.edu/reference/other/manyscreens.html

Oauu, you give a lot to red (joke).
Thank you, thank you, thank you. Once again you help. I am beginer of ai2 and i start an app, i think was to complicate for me. With your help i resolv all my problems and my app is almost finished. I want to make my app with 20 multiscreens, and it has only 3 mb. When i start the app, i dont reach for docs about ai2 and i dont knew it he has a limited screens. Now i finish app with 20 screens, i hope will work. Vs2 i will try to make it with 1 screen. Thank you for your help and God Bless you.

Use different screens wisely
Before starting to create another screen, first you should think about is it really necessary? See also Building apps with many screens and SteveJG's post about advantages/disadvantages, because in only one screen you also can use vertical arrangements to simulate different screens, just set the arrangements to visible = true/false as needed... See also Martyn_HK's example about how to use Tabs in App Inventor and another example from Cyd.
The recommended method of switching screens in App Inventor

Now i know Taifun. But my app is almost finished. Vs 2 i will try to make it in 1 screen. Thank you for your help.

Also remember that more data does not mean more screens, and

a different arrangement of a different set of pictures is just

a few more rows of data in a table or two internally.

Use the data in your puzzle tables to arrange sprites with the right images in the right places

for that puzzle when starting a new puzzle, not the locations you left in the Designer.

Ok. Thank you. I have 2 a question for you : Is important to show comment or just add comment and hide in Blocks ? Positions of the blocks in Blocks is important ( we have to put in order, or random )?
Now i change save_all_sprites with first_time_check in Screen Initialize, and when i resolv puzzle1, all puzzle get resolv :)

. I have 2 a question for you :

Is important to show comment or just add comment and hide in Blocks ?

It's important to add comments to your blocks, to explain what's going on and your design decisions,

for the benefit of other readers and for your own later benefit.

In the early days of a project, when there are only a few blocks, you can get away with using the

right-click-Download -Blocks-As-Image facility with all blocks expanded with their comments.

Unfortunately, there is a bug in the Blocks Editor that relocates comment bubbles far away from their blocks,

making the Blocks area look like a jellyfish. (See attached). For that reason, when I remember to do so,

I close the bubbles after I've taken my screen shots. I also use either the Windows 7 clipping tool or free GreenShot

to save clips of only one event block or procedure at a time, to make it easier to find them by name in a file directory

later when I assemble them with further explanation into a document.

This technique also encourages me to divide my logic up into smaller, simpler, screen sized procedures.

When it comes to coding, macaroni beats spaghetti.

Positions of the blocks in Blocks is important ( we have to put in order, or random )?

There are two considerations here:

1. Will the Blocks Editor crash under the load of too many blocks? Avoid this problem by keeping blocks minimized until you need to see them. Do your searching in the explanatory doc I mentioned earlier. The area of the blocks area seems to be a factor, so I go for a long and skinny area personally.

2. What arrangement of blocks will help you navigate among them? Tastes vary. Some people go alphabetically. I use the same order and indentation as the Table of Contents of my document, which is divided into sections and sub-sections according to function. For event blocks of arrays of buttons, I arrange them by the same shape as the button arrangements.

Now i change save_all_sprites with first_time_check in Screen Initialize, and when i resolv puzzle1, all puzzle get resolv :)

I can't comment on blocks I haven't seen.

Isn't it time to start a new thread for new questions?

Had this been a new thread, I could have re-used it for new people asking the same question.

Yes we can close this topic. I published my. I dont start another thread, i think because i want you to answer me. I think you understand what i try to do. I start vs 2 with my app and i get stack. I will try to resolve my problems before searching for help. Thank you for your help.

only allow dragging of one animation object at a time?

I have 5 imageSprites and 2 Balls on my canvas and if I pick one up and drag it across the other animation objects on my canvas, it 'picks up' whichever object I drag across so eventually I'm dragging them all around the screen. As they are being picked up, they actually 'disappear', but I believe they are just stacked on top of each other meaning I can only see the top-most sprite. Obviously with them all stacked up I can't separate which one I want to drag.

What is the best way in AI to make sure only one animation object can be dragged at a time?

Check out my blockout game. I have a slider and multiple sprites. http://TheAIRepository.info/source-code

Crusade,

I'm having the same problem!!

Tony,

Your blockout game only allows you to drag one item. The problem happens when you have multiple sprites on the screen at once and all of them are drag-able. If you start dragging one sprite, there is no function for App Inventor to detect when that sprite has stopped being dragged or dropped until you touch or drag a different sprite. If you drag one sprite over top of another sprite that is drag-able, they will both pick up and be locked together -- being dragged together.

I have been fighting this for a few days and still haven't come up with a good solution by myself or here in the forum yet.
I've tried using disable, collision, pushing the objects around, etc with not a lot of success so far.

I can disable one of the sprites easy enough on collision, but getting it to enable and able to be dragged when I want to move it is causing some problems. (You can't drag or touch a sprite that's disabled).

The detect collision blocks will only detect the first collision but none afterwards. For example, you have sprite 1 and sprite 2. You drag sprite 1 to collide with sprite 2, sprite 2 will react accordingly -- move x, move y, etc., But if you continue to drag sprite 1 into sprite 2 again without touching any other sprite, the second collision is ignored and sprite 2 will be picked up and dragged along with sprite 1 -- both being dragged together. You have to touch a different sprite and then come back to sprite 1 in order for the collision to work again -- but then again it only works once.

The goal would be a sort of leap-frog with your sprites.

I've searched for a good solution to this, but need some help!

Have you checked the issues list? This issue has been discussed on the forums and I believe an issue was posted about it. I don't remember the number, but star it when you find it.

I think this post might help.

Work-Around for Ball (or Sprite) Dragged Handler Issues

--

problem dragging only one sprite making puzzle game please help

I am trying to make a simple puzzle game with 9 puzzle pieces. I am using sprite.drag and moveto current x,y minus half the sprite dementions (centers the sprite on finger).

My sprite drags just fine on the canvas but whenever I drag over another sprite coded in the same way my finger picks up that one right with the current one. Eventually as I move around on the canvas I pick up all the pieces. I need some method that will allow me to only drag the first sprite I began to drag until I let go.

I looked for a way to disable all other sprites "while dragging", but I can't seem to find anything that monitors dragging and I really don't want to have to built an entire clock program that can detect is something is being dragged.

Thank you for any help.

PS:

To me it seems like if ur using sprite.dragged as apposed to canvas.dragged, the default functionality should be that the act of dragging only affects that sprite, judged from the first point of dragging.

This post might help.

Work-Around for Ball (or Sprite) Dragged Handler Issues

--

Image sprite dragging cannibalism

When dragging an image sprite, the mouse pointer moves over another sprite and picks it up also. Nothing I have tried so far stops this behavior. Have any of you out there in AI land had this problem and been able to solve it? Thanks.

Here's a picture of the app-to-be. When I drag the 4 over the 3, the 3 jumps behind the 4 never to be seen again...

I finally got the 3 to release by having the 4 sprite collided with and no longer colliding with handlers disable then enable the 3. Thanks.

is it possible for you to set in a picture - just of that part where you enable the collided to 2true" and "false".

I've played around with it and it still triggers me - my balls (images) still picks every of my other balls :) :)

Hubert- this is my current solution. You must touch, release, then drag the sprite but it will not pick up other sprites that it is dragged over.

When I try to use this methode, my srite only goes from site to site, not up-and-down or around?

I'm playing with a TacTic board - theirfor I need to move the "players around"

I use the method (shown in picture) to get the players around, but they tight up together!

If I try your way, it dosn't solve my problem

My blocks:

Hope you can see what to do - becase my players move nicely around now :o)

I don't see the picture you attached. I would like to know how you got it to work.

--

I've put it in the text under here as a picture and I have attached it too now

Thank you. I will try it out.

Hubert, After looking at your blocks, it seems that only the first block would be executed so I tried the above blocks. When dragging one sprite it moves only in the x direction. While I am dragging that sprite, if I move the mouse pointer (in the emulator) over the other sprite, it also lines up with the first sprite and they both move left and right together. Is this what you wanted the blocks to do?

I've experince the same - but it's not what I want.

When I use both the Xx and Yy, I can move my sprites and pictures around where I want to - and thats what I neeed it to do.

I want to move everything without anything tight up :o)

I've played with theese arguments:

"collided" if ball1 = ball2 then enable ball2

"notcollided" if ball1 not= ball2 then able ball2

I've tried this in manny ways - but I'll think it should work "the right way" - but i'm not strong with arguments yet :)

What does this say to you...?

I think I might have a solution (work-around) to this issue in the post, "Work-Around for Ball (or Sprite) Dragged Handler Issues"

Thank you! I tried it and it works great :)

See SireFoss' solution below...

Problem with imagesprites

Hello! I don't know if someone has already answered this topic but i have a problem when working with multiple image sprites.

While moving them in the canvas sometimes they stuck together as a part.

Do you know if there is a method or something to prevent this?

see here Image sprite dragging cannibalism

after thinking about that solution from SireFoss Work-Around for Ball (or Sprite) Dragged Handler Issues and the new features we now have with Version 129, I came up with this solution see attachment

stopCannibalism.zip

I would like to thank all for your solutions! Especially the last one from Taifun works fine!

I've been looking for a long time for this. Perfect...thanks.

Work-Around for Ball (or Sprite) Dragged Handler Issues

In an attempt to have multiple balls on a canvas have the ability to be independently available to be dragged around, I was having a lot of difficulty overcoming a vulnerability of the ball.dragged feature. As similarly outlined in these other posts, "only allow dragging of one animation object at a time?", "Image sprite dragging cannibalism", "problem dragging only one sprite making puzzle game please help", If each ball has a ball.dragged handler block, as you drag on ball across the other ball they will both then drag together directly on top of each other. This had the illusion that one disappears when it is actually just directly behind it.

After almost giving up, I came up with the solution shown below. It is basically a way to isolate which ball is enabled and disabled (without using a VERY needed Handler, like "onRelease" or "upTouch") as a function of which ball was selected first. Even when the clock timer interval setting was low (10-100ms), the balls movement are mutually exclusive.

I am not a "trained programmer" so can others PLEASE test, verify and comment about its logic and usefulness?

I intend to use the advanced features so that I can incorporate many more balls on the canvas.
This should also work for image sprites.
In my application, I will be placing an image sprite right over and track with a no color ball to take advantage of the circular collide perimeter.

I hope this helps some.

--
thank you!

can you upload a zip file, this would make it easier to test...

Attached is the zip.

There are a few extra blocks and components that can be ignored.

I will also be adding a provision that will restrict any ball motion if the canvas (no sprite) is clicked first.

I look forward to the feedback.

Gears_checkpoint1.zip

Very nicely done SireFoss! The app works in my emulator perfectly :)

Thank you, thank you

I got it working with 3 objects...however, what does the p1 and the p2 refer to?

Also, when I have the object get to a certain point, and having an action...it sort of works, but not completely. will try adjusting timer

with the new features of Version 129 we now can simplify the solution, see here
https://groups.google.com/d/msg/programming-with-app-inventor/txX75RaCG2s/0HrA2AtuCNAJ

Would the z level help in this situation?

using the same z levels or different z levels did not help
or do you have another simpler solution?

overlapping of image sprites

i am working on an app which has many image sprites ,but the problem is that the image sprites are overlapping,so can anyone please help in this issue to avoid image sprite overlapping

If you are having trouble dragging them without them sticking together,

look for "sprite cannibalism" in this board's search bar.

The sprite attributes in the Designer let you restrict their active areas.

Also be aware of the sprite image sizes in pixels, and

don't let them get too big.

Also, remember the difference between images of sprites and the sprites themselves.

Depending on your app, you can switch images in a Sprite at run time

as needed, having many more image files in the Media Drawer than actual Sprites.

Sir actually my app consists of 3 image sprites and I have assigned their x and y coordinates such that it is generated using random module in math available in app inventor 2 ,can you suggest any other solution as I am not dragging the images ....

You would have to write a procedure ("overlaps") that accepts two Sprites and

returns true if they overlap, and reject new sprites that overlap

already chosen sprites. (Keep a list of them.)

Use the Any Sprite blocks to get at the x,y,width, and height attributes

of each sprite. You will need them to determine the 4 boundaries of each sprite.

Since each sprite is a rectangle, that means two sprites overlap if

and only if their x domains overlap and their y domains overlap.

That requires a bunch of nested comparisons of the end points,

low to high, of each edge, in each dimension.

See this link for a slightly different problem, where a procedure has

to decide if a sprite has its center inside another sprite ... Drag and Swap Puzzles in JSON

I don't have anything lying around for the overlaps problem.