Interaction Problems

[Shadowstep33]

https://monsterisland.chimeracompanygames.com/secure/landing/raptor1

Only non-meshed areas are clickable. Seems to be a problem with meshed layers and not necessarily keyed meshes.

I'm using pixi v.3.0.6 and the latest pixi-spine

[Shadowstep33]

ping @ivanpopelyshev @simonTadram Still experiencing this issue

[Shadowstep33]

I was looking through the src and have a few questions regarding what could be causing the problem:

In SkinnedMesh.attachment.prototype:

    computeWorldVertices: function (x, y, slot, worldVertices)
    {
        var skeletonBones = slot.bone.skeleton.bones;
        var weights = this.weights;
        var bones = this.bones;

        var w = 0, v = 0, b = 0, f = 0, n = bones.length, nn;
        var wx, wy, bone, vx, vy, weight;
        if (!slot.attachmentVertices.length)
        {
            for (; v < n; w += 2)
            {
                wx = 0;
                wy = 0;
                nn = bones[v++] + v;
                for (; v < nn; v++, b += 3)
                {
                    bone = skeletonBones[bones[v]];
                    vx = weights[b];
                    vy = weights[b + 1];
                    weight = weights[b + 2];
                    wx += (vx * bone.m00 + vy * bone.m01 + bone.worldX) * weight;
                    wy += (vx * bone.m10 + vy * bone.m11 + bone.worldY) * weight;
                }
                worldVertices[w] = wx + x;
                worldVertices[w + 1] = wy + y;
            }
        } else {
            var ffd = slot.attachmentVertices;
            for (; v < n; w += 2)
            {
                wx = 0;
                wy = 0;
                nn = bones[v++] + v;
                for (; v < nn; v++, b += 3, f += 2)
                {
                    bone = skeletonBones[bones[v]];
                    vx = weights[b] + ffd[f];
                    vy = weights[b + 1] + ffd[f + 1];
                    weight = weights[b + 2];
                    wx += (vx * bone.m00 + vy * bone.m01 + bone.worldX) * weight;
                    wy += (vx * bone.m10 + vy * bone.m11 + bone.worldY) * weight;
                }
                worldVertices[w] = wx + x;
                worldVertices[w + 1] = wy + y;
            }
        }

        //console.log(worldVertices);
    }

In what context does computeWorldVertices get used for SkinnedMeshes? More specifically, how does the variable worldVertices get communicated the a scope outside of the function computeWorldVertices? It isn't an object property in the scope of the function, but it is a property of an object in the arguments of computeWorldVertices. Does the value still get assigned to .worldVertices of the variable used as the argument?

I also noticed that RegionAttachments and MeshAttachments work, I'm not fully sure as to why MeshAttachments work and SkinnedMeshAttachments don't, but I did notice RegionAttachments are inherently PIXI.Sprites. They also seem to go through a totally different pathway as opposed to SkinnedMeshAttachments, but one part of code that made me suspicious about what might be causing the problem is:

    for (var i = 0, n = this.skeleton.slots.length; i < n; i++)
    {
        var slot = this.skeleton.slots[i];
        var attachment = slot.attachment;
        var slotContainer = new PIXI.Container();
        this.slotContainers.push(slotContainer);
        this.addChild(slotContainer);

        if (attachment instanceof spine.RegionAttachment)
        {
            var spriteName = attachment.rendererObject.name;
            var sprite = this.createSprite(slot, attachment);
            slot.currentSprite = sprite;
            slot.currentSpriteName = spriteName;
            slotContainer.addChild(sprite);
        }
        else if (attachment instanceof spine.MeshAttachment)
        {
            var mesh = this.createMesh(slot, attachment);
            slot.currentMesh = mesh;
            slot.currentMeshName = attachment.name;
            slotContainer.addChild(mesh);
        }
        else
        {
            continue;
        }

    }

Lastly, when I console.log'd the worldVertices, and then drew them as a graphic, they were all the way at the top. I did not generate a texture from the graphics though, and placed the graphics straight into a container, so it's position may have been affected by that (as I believe drawing a polygon from a path is based on the parent containers position?)

Hope this helps

[SharpleafCC]

@ivanpopelyshev @simonTadram Either of you two know what's going on here? The game we're developing uses spine and meshes heavily and we can't interact with any of them because of this problem :(

[simonTadram]

The bug shouldn't be hard to find, probably the bounds are not updated correctly when using mesh but I am not sure. I would check that first.

I will help you eventually but now I am too busy

will come back to you maybe next week if you still need that

[SharpleafCC]

I understand. We'll look at it too, but it's a little out of our league. I would go ahead and assume that we'll still need the help next week. Unless @ivanpopelyshev can help us :)

[Shadowstep33]

@ivanpopelyshev @simonTadram Any time free up lately by any chance :P ?

[ivanpopelyshev]

@Shadowstep33 I believe we need to implement Mesh.prototype.containsPoint. Look at Sprite.prototype.containsPoint.

@englercj What do you think about it?

[ivanpopelyshev]

Please take a look at https://dl.dropboxusercontent.com/u/46636530/pixi-spine/pixi.js If that works for you, I will PR this into pixi.js

[Shadowstep33]

One second, checking now

[Shadowstep33]

It seems to work for me! If it's okay, I'm going to give it some more natural testing before I close this ticket (considering everytime I think the bug is fixed I end up coming back 10 minutes later due to my own lack of observance)

[Shadowstep33]

Alright, so it works in the context of raptor 2 but not in my actual game, though I have an idea that the problem there lays in my code (since it works in raptor 2).

Here is my non-working code, is there anything you can see immediately that I'm doing wrong?

        var spider = new PIXI.spine.Spine(loader.resources[monster.name.toLowerCase()].spineData);
        spider.skeleton.setToSetupPose();
        spider.update(0);
        spider.autoUpdate = true;

        // once position and scaled, set the animation to play
        spider.state.setAnimationByName(0, spider.spineData.animations[0].name, true);

        var bunny = new PIXI.Container();

        bunny.addChild(spider);

    bunny.interactive = true;
    bunny.on('click',function(data){
        console.log(bunny.data);
        if(bunny.data.owner == client_id){
                console.log("Monster noise or some shit idk dawg");
                if(selected_monster && selected_potion){

                    if(selected_potion["Target"] == "Ally"){
                        arenaSpotlight(null,true);
                        selected_monster.sprite.skills.visible = false;
                        selected_monster.action_timer.fill.children[0].text = "";       
                        remove_message();
                        socket.emit("arenaPotionMonster",{
                            game: game.id,
                            attacker: selected_monster.id,
                            attackee: bunny.data.id,
                            player: player,
                            pot: selected_potion
                        }); 
                    }
                }               

        }else{
            if(selected_monster && selected_skill){
                var opponent = 1;
                if(player == 0)
                    opponent = 1;
                else
                    opponent = 0;

                //alert("Monster is attacking");
                //arenaSpotlight(null,true);
                selected_monster.sprite.skills.visible = false;
                selected_monster.action_timer.fill.children[0].setText("");

                remove_message();
                socket.emit("arenaAttackMonster",{
                    game: game.id,
                    attacker: selected_monster.id,
                    attackee: bunny.data.id,
                    player: player,
                    skill: selected_skill.id
                }); 
                selected_skill = null;
                selected_potion = null;
            }

        }
    });

[ivanpopelyshev]

Is console.log generating something? Do you have something else interactive on top of it? May be some rectangle that you used before

[Shadowstep33]

No, not from that handler

[Shadowstep33]

The handler on the parent Container (i.e. what used to be Stage) is triggering, but there are no stopPropagations on it, so it shouldnt cause a problem

[Shadowstep33]

does the variable loader.resources provide different information than res in the context of the .load callback?

[englercj]

does the variable loader.resources provide different information than res in the context of the .load callback?

No. In the .load(loader, resources) callback PIXI.loader.resources === loader.resources === resources.

[Shadowstep33]

I found this in my code that seems to be loading my other version of pixi

<script type="text/javascript">new Image().src = "https:\/\/[mysitesdomain].com\/secure\/js\/pixi.js-3.0.0\/bin\/pixi.js";</script>

does this look familiar to any of y'all? I do not remember adding that and can't seem to find where it is being generated from

[ivanpopelyshev]

That looks like code from examples.

[Shadowstep33]

It seems like it is facebook generated, so I just replaced the old pixi file with the new one from you and it still doesnt seem to be working in the context of our game :/

My coworker, who is apparently much more intelligent than I, pointed out that our game is actually now live, so our NDA is not really in effect anymore. If you wouldn't mind just taking a look at what's goin on live, you might be able to see something I'm missing.

https://apps.facebook.com/monsterislandonline/

the short instructions:

1. Click build, build a habitat.
2. Rush the habitat (you get some free gems) and then summon a monster.
3. Now u can battle. Do multiplayer for the quickest, the problem is in the actual battle - you can't click Spine monsters

[ivanpopelyshev]

@Shadowstep33 Your game somehow is using old pixi from "src" folder. I dont know how, may be generated code

[Shadowstep33]

@ivanpopelyshev thank you for confirming my suspicion. I will try to find this and let you know the status once I do

[ivanpopelyshev]

@Shadowstep33 Try to add necessary requires and method "containsPoint" from that patch to src/mesh/Mesh.js

https://github.com/ivanpopelyshev/pixi.js/commit/217c7775c89900bafa017d835d01bf9a93494d69

[ivanpopelyshev]

@Shadowstep33 Its strange, because I can find method PIXI.mesh.Mesh.prototype.containsPoint through console. But when I try to add breakpoint in pixi-spine.js it doesnt work.. Something injected different pixi in your app in dependencies

[Shadowstep33]

Yeah, that's what it seems like to me as well @ivanpopelyshev but I'm very confused as to what could be doing it... It might be something in the facebook environment (seems almost like a cache problem) but I never set that sort of config.

Stranger yet, when I don't include pixi.js, PIXI is undefined. When I include the script, it uses the old src; even if I move the pixi.js file away from the src directory.

[ivanpopelyshev]

Nope, pixi-spine definetely using new version of Mesh object. That's strange

[Shadowstep33]

I managed to get the Spine handler to console.log something: I had to set stage.interactive = false

[Shadowstep33]

I'm going to see if I can recreate the bug with raptor

[ivanpopelyshev]

@Shadowstep33 but it worked with regular spine anims, no meshes?

[Shadowstep33]

Yes, the problem occurs with raptor as well. When the parent is interactive, the mesh bug comes back is essentially what it seems like but when I set interactive = false on the (stage) container then it all works as expected

[Shadowstep33]

Wait, scratch that. I think I confused myself with something

[Shadowstep33]

Yeah, the parent container being interactive is definitely not causing a problem. I was pulling the wrong pixi file by accident

[ivanpopelyshev]

@Shadowstep33 game looks awesome, it'll give you moneys )

[Shadowstep33]

haha thanks :) I will pass the compliment on to the whole team

[SharpleafCC]

Just wanted to pop in and say thanks @ivanpopelyshev ! Your compliment means a lot to us and our team :)

[Shadowstep33]

@ivanpopelyshev , I am noticing that with the previous build of pixi that I had, the spine interactions work correctly when the parent container is not interactive. Not sure if that adds anything to this conversation or not, but I found it somewhat interesting. I'm currently trying to find what the hell is going on with this mysterious older version of pixi being forced in

[ivanpopelyshev]

@SharpleafCC Thank you :) I'm just very excited that someone uses HTML5 and pixi to make that kind of games. Did you look at "Monster Force" at ga.me? I believe success of my team will depend on success of other teams (no one will give me money for html5 projects if html5 has no traction). I recommend you to use angular.js or react.js in next project, jquery is pain. I prefere angular, it helps to separate regular html/css interface building and logic.

[ivanpopelyshev]

@Shadowstep33 I placed some breakpoints in pixi-spine and I think that it uses my build of pixi, because every created Mesh has containsPoint method. While old pixi version in sources list is strange, I think we need to search for other problems.

[Shadowstep33]

Okay, I agree. On that topic, I forced the older src code to 404 so that may be helping with that. If u open up console, switch developer scope to iframe_fb_canvas and then enter the command

stage.interactive = false;

while in a battle, the skills will then work. This resembles a past pixi bug that was fixed, but then reverted (**edit, removed to reverted) (commit can be found here https://github.com/GoodBoyDigital/pixi.js/commit/5344062ef4657857ce6a20bea4681e5d66c1c2b2 the thread is here https://github.com/GoodBoyDigital/pixi.js/issues/1725 ; perhaps @englercj will have some input ). Conversely, I decided to just apply this patch (as I had in the version before I dowloaded your newest dropbox version) and now things are working as expected :)

[ivanpopelyshev]

@Shadowstep33 Ok, now I can actually debug pixi.js, my breakpoint in Mesh works! Congratulations! Also, I tested adventure screen - spine animation working as intended.

[ivanpopelyshev]

Lets wait while @englercj looks at it and decides what to do with that bug and my PR. Then we'll close this issue and you'll open whatever you need next.

[Shadowstep33]

Sounds good, thanks for the help @ivanpopelyshev !

[ivanpopelyshev]

@Shadowstep33 Well you can help me by giving me the contact of person from your team who knows how to promote game app in facebook. I'm very stupid in that field.

[Shadowstep33]

@ivanpopelyshev haha can do, he's not on github though. If you want to private message me your email I can put y'all in touch

[SharpleafCC]

@ivanpopelyshev,

I can help you with that :)

How should I contact you outside of this thread?

On Mon, Jun 8, 2015 at 6:40 PM, Ivan Popelyshev notifications@github.com wrote:

@Shadowstep33 game looks awesome, it'll give you moneys )

Reply to this email directly or view it on GitHub: https://github.com/pixijs/pixi-spine/issues/38#issuecomment-110172439

[Shadowstep33]

I'm going to let @sharpleafCC take over from here. He outranks me :]

[ivanpopelyshev]

@SharpleafCC ivan.popelyshev@gmail.com just email me something and I'll show what I have and describe my problems. Nothing hard, I believe its just basic stuff from your point of view.

[SharpleafCC]

@ivanpopelyshev

I'll send you a proper email in the next day or two.

Thanks again to you and everyone else that's been helping us with these issues. This was a key part of what we needed for our game to be where we want it to!

On Mon, Jun 8, 2015 at 7:15 PM, Ivan Popelyshev notifications@github.com wrote:

@SharpleafCC ivan.popelyshev@gmail.com

Reply to this email directly or view it on GitHub: https://github.com/pixijs/pixi-spine/issues/38#issuecomment-110179165