trinoo

Members
  • Content count

    11
  • Joined

  • Last visited

  1. proper canvas resizing method

    Guys, sorry for bothering with this question, I found a few answers to this problem, but im still not able to get it to work. I have made a complex app in Pixi, but now Im fighting with a trivial problem, how to properly set up HTML file and resize function to let my canvas resize to actual window size. Now my HTML file contains one div: <div id="floorplanner" class="pixi"></div> here is css file: body { position: absolute; height:100%; width:100%; padding: 0; margin: 0; overflow: hidden; } canvas { padding: 0; margin: 0; } .pixi { height: 100%; width: 100%; overflow: hidden; } I append canvas to this div using: document.getElementById("floorplanner").appendChild(renderer.view); and finally I have attached function scaleToWindow(renderer.view, "#CCCCCC"); (function source bellow) to window "resize" event: //Center and scale the game engine inside the HTML page function scaleToWindow(canvas, backgroundColor) { backgroundColor = backgroundColor || "#2C3539"; var scaleX, scaleY, scale, center; //1. Scale the canvas to the correct size scaleX = window.innerWidth / canvas.width; scaleY = window.innerHeight / canvas.height; //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` scale = Math.min(scaleX, scaleY); canvas.style.transformOrigin = "0 0"; canvas.style.transform = "scale(" + scale + ")"; //3. Remove any padding from the canvas and body and set the canvas //display style to "block" canvas.style.paddingLeft = 0; canvas.style.paddingRight = 0; canvas.style.paddingTop = 0; canvas.style.paddingBottom = 0; canvas.style.display = "block"; //4. Set the color of the HTML body background document.body.style.backgroundColor = backgroundColor; //Fix some quirkiness in scaling for Safari var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf("safari") != -1) { if (ua.indexOf("chrome") > -1) { // Chrome } else { // Safari canvas.style.maxHeight = "100%"; canvas.style.minHeight = "100%"; } } return scale; }; It works somehow (buggy), but according to this topic I should use renderer.resize(window.innerWidth, window.innerHeight); metod, but im not able to iplement it. Can anybody please help or provide a few rows simple sample of proper canvas+HTML setting up? I also found this article http://www.williammalone.com/articles/html5-game-scaling/, but the William uses plain image in showcase, but I dont know, how to change his image to my canvas to get it to work...or simply how to implement it...
  2. problems with pointertap event

    Did not notice that, thanks.
  3. problems with pointertap event

    According to the docs, pointertap event should occur when pointer device button is pressed and released on the display object. But it occurs also when I press device button down outside of the display object, then move still holding it pressed over the display object and release it. So, it acts like a pointerup event. Is it a bug, or am I doing (understanding) something wrong, or any workaround please? thanks
  4. how to remove listener

    Thanks guys, understand it now.
  5. how to remove listener

    Thanks for answer, but Im not sure, if I understand you right. Its like a kind of dragging: on-pointer-down (start drag) --> sets listeners for on-pointer-move (moving objects) and on-pointer-up (stop moving)--> when on-pointer-up, then stop dragging/moving - so I need to remove on-pointer-move listener right when on-pointer-up event occurs. How can I store it and use later? And also, how its possible, that removeAllListeners() works? I was trying to find this method in Pixi sources to study it, but cannot find its definition anywhere... Seems like I have to use standard approach without closure and pass those two needed arguments differently...but just interested in...
  6. how to remove listener

    Hello guys, a noob question here: if I set up listeners like this, all works fine for me: myobject.on("pointerdown", onPointerDown); function onPointerDown(ev){ myobject.on("pointermove", onPointerMove); myobject.on("pointerup", onPointerUp); } function onPointerMove(ev){ //do some things } function onPointerUp(ev){ myobject.off("pointermove", onPointerMove); } but if I set up things like this: myobject.on("pointerdown", onPointerDown); function onPointerDown(ev){ var a = somevalue; var b = somevalue; myobject.on("pointermove", onPointerMove.bind(this, a, b));//closure here to pass aditional parameters to callback myobject.on("pointerup", onPointerUp); } function onPointerMove(param_a,param_b,ev){ //do stuff with param_a,param_b and ev here } function onPointerUp(ev){ myobject.off("pointermove", onPointerMove);//does not work myobject.off("pointermove", onPointerMove.bind(this, a, b));//also does not work myobject.removeAllListeners();//works, but this is not, what I need } If I make a closure callback, I'm not able to remove onPointerMove listener then. Can anybody explain me, what is going on there or what am I missing? (new to Pixi and JavaScript in overal, so sorry if too stupid question...) thanks
  7. Pixi and Hammer.js integration

    Hello guys, please, does anybody have working example of Pixi and Hammer.js (gestures) integration? I was not able to find anything useful neither here in the forum, nor using google...thanks in advance...
  8. Found it by myself - so in case anyone will find it handy, you have to use also - along with autoPreventDefault = false: renderer.view.style['touch-action'] = 'auto'; or any other value according to CSS touch-action to overwrite the default value 'none'
  9. Is there any possibility, how to achieve scrolling or zooming of whole HTML body by making a swipe on canvas on Android (Chrome)? The only thing I was able to find when searching over internet and Pixi docs is using a property "autoPreventDefault()". But even when I set it to false, it does not work. What Am I missing here? Is there any simple code example of autoPreventDefault? When you try to zoom-in the page outside the canvas and then move over it (canvas fill whole view port) - you are now in a trap, because there is no way how to move the canvas or zoom-out back. example: var renderer = autoDetectRenderer(800, 500,{antialias: true, transparent: false, resolution: 1}); renderer.plugins.interaction.autoPreventDefault = false; renderer.view.style.border = "1px dashed black"; renderer.backgroundColor = 0xDDDDDD; renderer.autoResize = true; document.body.appendChild(renderer.view); renderer.render(stage);
  10. interactive/clickable line

    Hello Ivan, haah, ok, I'll try to implement rectangles instead of lines then. Thanks for your quick answer anyway.
  11. interactive/clickable line

    Hello, Pixi.js experienced developers! I'm flash developer and I'm here to kindly ask for your help. I'm trying to port my complex project from flash to JS using Pixi, but stacked now... I have a problem shown on image in attachment: i am playing with a few circle points, which you can move around using drag and drop (mouse), they are connected with lines, which are dynamically redrawn as you move the points around. Everything on the stage is created using PIXI.Graphics class. So far easy. But I need to make not only blue points but also the lines mouse interactive. Is there any trick or workaround, how to force a Line shape created using Graphics class to fire mouse events (mouseOver/Click)? It was enough in old flash to put the Line shape into MovieClip or Sprite and then assign event to that movieClip/sprite, but here - this trick does not work at all - still no mouse events fired. Setting a rectangle hitarea for the line segment works, but is not usefull, as the position, angle and also a width of the line segments are changed dynamically at runtime. Searching in this forum brings no answers to me, so trying it this way... thanks.