Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
How can I use Illustrator Vectors for Touch Events in Gideros? — Gideros Forum

How can I use Illustrator Vectors for Touch Events in Gideros?

Daimyo21Daimyo21 Member
edited April 2014 in Game & application design
This goes along with my other post here(I'm trying to find an alternative method):

http://giderosmobile.com/forum/discussion/4689/how-to-eliminate-spritetexture-white-space-from-registering-with-touch-eventlisteners#Item_4

I have taken the advice from that post (thanks again) but have not implemented the code yet but I know I can in my own way. However, my artist has been working in illustrator and has been using vector graphics and exporting it to .png format which gives the white "transparent" space around each image(this clear space registers as part of the touch eventlisteners).

We are using complex shapes that are not just circles and squares but they mimic real life objects.

Is there a 3rd party application(preferably free) or native way to use those vectors to map out Touch Eventlisteners (I dont need physics) so I can use the vectors with pin point accuracy when I click them with the mouse and not get the transparent white space around each sprite.

Even though my game doesn't really need physics(may add it in later as a gameplay option), do I need to use box2d or a physics engine to use vectors properly with touch eventlisteners?

Or do I simply need to code it in the onMouseDown >> if within vector area >> self.focus = true etc?

Comments

  • ar2rsawseenar2rsawseen Maintainer
    @Daimyo21 unfortunately I'm not sure how efficient this solution, would be, there are two possible solutions:
    1) Using Media plugin loading image and checking alpha of the pixel value
    local bmp = Bitmap.new(Texture.new("image.png"))
    bmp.media = Media.new("image.png")
     
    bmp:addEventListener(Event.MOUSE_DOWN, function(e)
        --check bounding rectangle first
        if bmp:hitTestPoint(e.x, e.y) then
            local gX, gY = bmp:getParent():localToGlobal(bmp:getPosition())
            --assuming anchor point is at 0,0
            local offX = gX-e.x
            local offY = gY-e.y
            local, r, g, b, a = bmp.media:getPixel(offX, offY)
            if a > 0 then
                --we have a hit on a texture
            end
        end
    end)
    2) Using undocumented Dib class (Note it may be deprecated with any Gideros version)
    require "bit"
     
    local bmp = Bitmap.new(Texture.new("image.png"))
    bmp.dib = Dib.new("image.png")
     
    bmp:addEventListener(Event.MOUSE_DOWN, function(e)
        --check bounding rectangle first
        if bmp:hitTestPoint(e.x, e.y) then
            local gX, gY = bmp:getParent():localToGlobal(bmp:getPosition())
            --assuming anchor point is at 0,0
            local offX = gX-e.x
            local offY = gY-e.y
            local a = bit.band(bmp.dib:getPixel(offX, offY), 4278190080) / 16777216
            if a > 0 then
                --we have a hit on a texture
            end
        end
    end)

    Likes: Daimyo21

    +1 -1 (+1 / -0 )Share on Facebook
  • Daimyo21Daimyo21 Member
    edited April 2014
    @ar2rsawseen

    The first method looks the best as I'd prefer the non-depreciated method(I'll give dib a try if first method doesn't work).

    Is this the "media plugin" you're talking about or is it native in the code?

    http://giderosmobile.com/labs/media

    I don't have the indie version license for gideros.. Is the 2nd method free versus the media plugin method? I may just get a license if this for sure works but don't have the money atm.

    I plan on changing the anchorpoint to (0.5, 0.5)
    What does this have to do with it being at (0, 0)?
    --assuming anchor point is at 0,0
            local offX = gX-e.x
            local offY = gY-e.y
     
    --Would it just be:
            local offX = gX
            local offY = gY
    --if it was at (0.5, 0.5)?

    Edit: Looked into box2D a bit more(my first game, never used it) so I want to refrain my question about it.

    I found this physics editor that is sort of what I wanted to get at.
    http://www.codeandweb.com/physicseditor

    If I were to map out each of my compound/complex objects with box2D or physics editor.

    http://www.emanueleferonato.com/2011/03/11/create-complex-box2d-shapes-in-a-click-with-physicseditor/

    Could I use touch events that would only register the area that is mapped out by the physics editor and if so, how? Is this adding too much work for a game that doesn't really use physics (unless we think of an idea to have them in there).

    Initially I wanted to just see if I could use the vector coordinates from adobe illustrator to map out objects in gideros but with the methods above, that may be more work than necessary.

    Gideros example for anyone interested:
    http://www.codeandweb.com/blog/2012/05/07/physicseditor-gideros
  • ar2rsawseenar2rsawseen Maintainer
    edited April 2014
    I don't think it is a good idea to use physics here, if you don't need them in your game.

    Because the only way I see it is to create 1px wide body and listen to collision callback to see if there is a collision. So basically you will know if there is a collision, but if there is no collision, how long should you wait till you can proceed (because there is no none-collision callback :))

    And yes the Media plugin I talked about is in the labs and is for premium users. But if you can't afford it, go with the Dib class. Just abstract it the way, so you could easily replace it with Media plugin or any other solution :)

    About anchor points. Well we need to translate input coordinates to the pixel that is touched in image, thus without anchor points we simple subtract picture position.
    With anchorpoints, we would need to calculate it a bit more differently:
    Actually I think my initial code had a mistake. it should be like this:
    --assuming anchor point is at 0,0
    local offX = e.x-gX
    local offY = e.y-gY
     
    --for any anchor point
    local anchorX, anchorY = bmp:getAnchorPoints()
    local offX = e.x-(gX-bmp:getWidth()*anchorX)
    local offY = e.y-(gY-bmp:getHeight()*anchorY)

    Likes: Daimyo21

    +1 -1 (+1 / -0 )Share on Facebook
  • @ar2r, you might want to remove the t in between AnchorPoints
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • @ar2rsawseen

    Yeah it seems as though dib class doesn't work and crashes the gideros player immediately on mouseDown event.

    I'll look into getting the media plugin with a student license. It seems like it would save a ton of time if it works properly. If you think of any other methods similar to the dib/media plugin idea which is brilliant for what I need, please let me know.


    Thanks again!
  • ar2rsawseenar2rsawseen Maintainer
    edited April 2014
    Crashes without any error?
    This code copy pasted seems to work for me on all my devices including desktop:
    require "bit"
    local bmp = Bitmap.new(Texture.new("ball.png", true))
    bmp.dib = Dib.new("ball.png")
    bmp:addEventListener(Event.MOUSE_DOWN, function(e)
        if bmp:hitTestPoint(e.x, e.y) then
            local a = bit.band(bmp.dib:getPixel(e.x, e.y), (255*256*256*256))/(256*256*256)
                if a == 0 then
                    print("me")
                end
        end
    end)
    stage:addChild(bmp)

    Likes: Daimyo21

    +1 -1 (+1 / -0 )Share on Facebook
  • Daimyo21Daimyo21 Member
    edited April 2014
    @ar2rsawseen

    Adjusting the code, you're right. It does work, however it is inconsistent. 50% of the time I click into the transparent region of most of my objects, it still registers the pixel as being non-transparent (and vice versa, not using any anchorpoints). Also at times if I click too fast, it seems to crash the player(maybe memory issue with multiple objects [15+] close to one another).

    I found other posts on this and actually found what I wanted to try with vertices(function by atilim):

    http://giderosmobile.com/forum/discussion/218/how-to-get-spritehittestpoint-to-ignore-transparent-areas-of-image#Item_1

    I will end up giving this a try. At worst what I will end up doing is setting vector points on each object as "grab points" and then highlight them so player knows that this is where you grab the object etc.

    Thanks for all your help, learning so much! =)

    Likes: ar2rsawseen

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.