CreateJS - Collision detection between two createjs.Containers -
i have working in desktop browser not on touch devices because update variables need on mouseover. around trying check collision detection between 2 containers , update needed variables. items should snap placeholder positions when collision between 2 detected. catch items , placeholders placed dynamically item must able snap placeholder.
var placeholders,items,selecteditem,collision,startx, starty, snapx, snapy, xpos, ypos; var stage = new createjs.stage("canvas"); createjs.touch.enable(stage); createjs.ticker.addeventlistener("tick", tick); function init(){ xpos = 0; ypos = 120; container = new createjs.container(); stage.addchild(container); placeholders = new createjs.container(); placeholders.name = "placeholders" stage.addchild(placeholders); items = new createjs.container(); stage.addchild(items); for(i=0;i<2;i++){ placeholder = new customcontainer(i, "#ff0000", 100,100); placeholder.setbounds(0,0,100,100); placeholder.cursor = "pointer"; placeholder.x = xpos; placeholder.name = "placeholder"+i container.addchild(placeholder) xpos+= (placeholder.getbounds().width + 10); } xpos = 0; for(j=0;j<2;j++){ item = new customcontainer(j, "#0000ff", 100,100); item.active = false; item.setbounds(0,0,100,100); item.name = "item"+j; item.x = xpos; item.y = ypos; item.startx = xpos; item.starty = ypos; container.addchild(item) item.addeventlistener("mousedown", selectitem); xpos+= (item.getbounds().width + 10); } stage.addchild(placeholders,items); } function selectitem(evt) { selecteditem = evt.target.parent; selecteditem.mouseenabled = false; evt.addeventlistener("mousemove", function(ev) { moveitem(ev); }) evt.addeventlistener("mouseup", function(ev) { selecteditem.mouseenabled = true; if(collision){ //new position based on hittest //selecteditem.x = ; //selecteditem.y = ; }else{ selecteditem.x = selecteditem.startx; selecteditem.y = selecteditem.starty; } }) } function moveitem(evt){ pt = placeholders.globaltolocal(stage.mousex, stage.mousey); obj = evt.target.parent; obj.x = pt.x - 50; obj.y = pt.y - 50; //selecteditem collision placeholder collision = obj.hittest(pt.x,pt.y) } function tick(evt) { stage.update(); } $(document).ready(init());
i not getting hittest right. can see working code below.
the hittest test pixel-perfect hit. believe you're looking collision test. try this: https://github.com/olsn/collision-detection-for-easeljs
Comments
Post a Comment