2017년 8월 13일 일요일

Dragging and Placing Sprites

I am working on a game for class that is the topic of Punnett Squares. Our idea to that you drag sprites to the chart that we created (we put the picture in a canvas). How can you make sprites, when dragged into a canvas, connect with a certain spot? Can we place new canvases over the top of the 4 squares (if so, How?), or what could we add to make it interactive?

Sprites: Bb Bb bb BB

You might need several Canvas, each in its own Horizontal or Vertical Arrangement or you might use some of the ideas shown in this tutorial which allows a user to drag sprites to an area of the canvas that is 'zoned' by using a grid system ... all described here

Animal Canvas – a children’s educational App Inventor 2 game tutorial . The text shows how to set up a grid on the Canvas.

Also you might benefit from this article if you have not already read it

Chapter 17. Creating Animated Apps

There may be other ways to make this interactive so be sure to review this thread over the next several days as others post suggestions.

I have been working on this in my spare time the last day or two and have a solution that is fairly straight-forward and easy to understand.

It does require a considerable amount of blocks and could be optimized by anyone inclined to do so as a challenge.

The requirements:

Drag four ImageSprites to a correct target on the genetic chart.

This requires that some logic in the app allow each of the four ImageSprites to be dropped in either of two locations.

The draggable ImageSprites are named Bb1,Bb2,bb1,bb2.

Their pictures also display their name.

There are four target sprites located in the chart, one for each square arranged in compass cardinal directions:

NW,SW,NE,SE

These sprites have no picture so are not visible but are used to trigger a collision with any sprite dropped on them and to position the dropped sprite.

If the correct sprite is dropped in one of the two correct locations on the chart, then 1 is added to a counter.

If the counter = 4 then the chart is completed and a notifier displays 'Well done!'

Sprite cannibalism avoidance is built-in.

More information is provided in the comment bubble of the About procedure block.

DragAndDrop.aia

Thank you very much for your time and helping us out! Have a great day

In the Drag procedure, the 'Sprite' argument should be named 'x'.

We are studying your code for our game and we had some questions.

1. For "call Drag" how did you add on the Pair ___ Sprite _____ Y_____?

2. Where did you initialize theses sprites? (pair, sprite, y)

3. How did you create the "call ImageSprite.Move To for component x y?

1. For "call Drag" how did you add on the Pair ___ Sprite _____ Y_____?

I accidentally named the second argument 'Sprite' to change it to 'x' click on the 'Sprite' name and type 'x'...

Click on the blue square in the upper left corner to add a new argument...

Drage the 'input x' block on the left into the list on the right and change it's name...

2. Where did you initialize theses sprites? (pair, sprite, y)

Click on the 'Procedures' category on the left, then drag out a 'Drag' block...

Drop it on the Blocks canvas...

Add arguments to it and insert it in a Dragged event block...

3. How did you create the "call ImageSprite.Move To for component x y?

Click on one of the ImageSprite instances on the left and drag out a MoveTo block...

Now insert arguments into the empty sockets...

Thank you for responding it is greatly appreciated. However since we aren't using your project specifically we are trying to somewhat duplicate it using what we have access to in app inventor. For the procedure "Drag" how did you add the pink colored components to the procedure. And we also would like to know if you initialize a global for the following; "Pair" "Sprite" "x" on the part of your code with that has to deal with anti-cannablism of the sprites

Sorry for the confusion, we are not super familiar with app inventor, so we didn't know you could add components to different procedures easily. We assumed you created it through a more difficult process. We understand what you did now. If we have anymore questions we will let you know.

Thank you so much for everything!

One last question, where did you find this component?

you can find it in the Any Component drawer...

we also would like to know if you initialize a global for the following; "Pair" "Sprite" "x"

No these are arguments that accept values when the procedure is called.

Inside the Drag block they are treated as local variables.

We copied your code to our game to see if it would work the other components we have and it didn't. We are attaching our .aia, if you could help us out again that would be greatly appreciated

Punnett_Squares.aia

I have corrected level 1's blocks.

Now try doing the other levels based on this one.