Current screen as image

iroosma

  • Posts: 97
Hello,

I am making a mobile game that has the user dragging and dropping items around the screen.  Some of the items are small and the placement of the items is important.  The user's finger covers the pieces as it is dragged across the screen.

I want the user to be able to see what is under their finger so they can accurately place the pieces on the screen.

To do this I created a window at the bottom of the screen that duplicates the surrounding area of where the touch location.  (see screenshot of the tutorial video).  This is working beautifully on flash but crashes on ios after the image after the user's finger is held down for a while and the image under their finger has been loaded over an over again.  I believe this is because I am using the "Current screen as image" function, which uses a lot of memory.  Currently the screenshot is only taken every 20 frames.  This really needs to be closer to 5-10 frames. The code from the when drawing event is attached.

Any help that you can provide to help me improve the performance of this feature or to help me redesign it.

Thanks so much!

CmdrWhitey13

  • Posts: 505
Are these actors on the screen or images? You might be able to update that current area of the game rather than grabbing the entire screen. Also, have you tried adding the instance to a layer to see if it makes a difference?

tigerteeth

  • Posts: 733
Iroosma,

Perhaps zooming would be simpler.

iroosma

  • Posts: 97
I had no idea I could zoom.  Zooming was what I originally wanted to do but could never figure out how to do it.

How do I implement zooming?

Thank you so much in advance for any help you can provide about zooming!!!

iroosma

  • Posts: 97
CmdrWhitney13,
Everything on the screen is an actor except for the box in the bottom left corner, that is part of "Current screen as image".

gplar

  • Posts: 1115
I worked around this by letting small actors have an invisible border "handle" which makes it easier to drag without covering the image with your finger. Not sure if this is possible in your game, though. Depends on how you detect drops. I used x,y coordinates with  the necessary offset to compensate for border. :-)

iroosma

  • Posts: 97
All of my actors are much larger than what the user actually sees because of large transparent areas around the actor.   It is easy to drag and drop each item.  The challenge comes in because the pieces need to be dragged and then dropped in a precise location, the pieces need to fit together or match up, which is hard because the player's finger is covering the piece so they don't know if it is in the correct location or not.

Does anyone have any suggestions about how to improve the performance of my When Drawing block?  Especially around the Current Screen As Image section.

Help on zooming would also be great but I don't think it is possible with the current functionality in Stencyl.

yoplalala

  • *
  • Posts: 1632
maybe having an idea, testing it

« Last Edit: December 29, 2015, 01:49:36 pm by yoplalala »

yoplalala

  • *
  • Posts: 1632
try this  , it should be more efficient
instead of the set image to part of image  of current screen ....................
put a code block

create an img the size of your tiny screen then
Code: [Select]
var dummyRect = new flash.geom.Rectangle(0, 0, 100, 100);  // of course set the values ( it's (x,y, width, height)), that's the part of the screen you want to copy).
_img.draw(openfl.Lib.current.stage, null, null, null, dummyRect);
now you can instanciate the image as usual.

Logically , as you drawing only the part you need , an only once.  You should be far far more efficient. I haven't tried on IOS / android. ( but current screen as image bugs a lot on android).

CmdrWhitey13

  • Posts: 505
I have just created a demo. It seems to be working. Is this the effect you are looking for?


<a href="http://static.stencyl.com/games/33003-0.swf" target="_blank" class="new_win">http://static.stencyl.com/games/33003-0.swf</a>
http://www.stencyl.com/game/play/33003

iroosma

  • Posts: 97
CmdrWhitey13, this is exactly what I am looking to do.

How did you implement this?

CmdrWhitey13

  • Posts: 505
CmdrWhitey13, this is exactly what I am looking to do.

How did you implement this?

I have came up with this system with regions, image api, and actor as image. Works pretty good. Bit buggy though.
It does not use current screen as image.

iroosma

  • Posts: 97
try this  , it should be more efficient
instead of the set image to part of image  of current screen ....................
put a code block

create an img the size of your tiny screen then
Code: [Select]
var dummyRect = new flash.geom.Rectangle(0, 0, 100, 100);  // of course set the values ( it's (x,y, width, height)), that's the part of the screen you want to copy).
_img.draw(openfl.Lib.current.stage, null, null, null, dummyRect);
now you can instanciate the image as usual.

Logically , as you drawing only the part you need , an only once.  You should be far far more efficient. I haven't tried on IOS / android. ( but current screen as image bugs a lot on android).


Yoplalala, this also seems like a good solution but unfortunately I am not very familiar with how to implement code in Stencyl.   Could you go into a bit more detail about how to add this code into my game and what exactly it is doing?

Thanks so much for your help!

iroosma

  • Posts: 97
I have just created a demo. It seems to be working. Is this the effect you are looking for?


<a href="http://static.stencyl.com/games/33003-0.swf" target="_blank" class="new_win">http://static.stencyl.com/games/33003-0.swf</a>
http://www.stencyl.com/game/play/33003

Would you mind providing more detail and images of the code?  That would be super helpful!

CmdrWhitey13

  • Posts: 505


Would you mind providing more detail and images of the code?  That would be super helpful!
[/quote]

I am attaching the Scene Behavior for this. In the image, zoomed width and height is 128. This can be changed.
For the image instance on screen, it is hard coded to x of 0, just change this to the location you want.
The port on screens height is the zoomed height.
Under the attributes tab shows a breakdown for each attribute.
Hope this helps.