Jump to content

Search the Community

Showing results for tags 'interaction'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 25 results

  1. I'm trying to se my interaction mode to true so I can set my sprite to follow my cursor. I've managed to do this before i Added ES6 and webpack. Here is a code example: import * as PIXI from 'pixi.js'; // App with width and height of the page const app = new PIXI.Application({ width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAAA, }); document.body.appendChild(app.view); let player = new PIXI.Sprite.from('assets/dirt.png'); player.anchor.set(0.5); player.x = app.view.width / 2; player.y = app.view.height / 2; app.stage.addChild(player); const movePlayer = function (e
  2. Computer graphics, animations, games and interactions are now self-evident. You just have to pick up your smartphone, tablet, desktop computer or what else and you feel intuitively when you have to swipe, click, drag or pinch zoom. You also expect nothing less than nice interfaces with smooth animations. But it wasn't always like this... There were times where there were no editors like Photo and Designer, nor Illustrator, nor Photoshop, and even computers, games and animations of frames didn't exist... I wrote a blog series of six where I like to take you on a journey through time w
  3. (I've seen many threads about PIXI in MV before, but not about this subject, so I make a new one. If someone already made one, I would be grateful if you link it below) A group of people I'm collaborating with is using RPG Maker MV. I don't have much experience with this engine before, but IMHO, the engine performance is ... erm, not very good, and it also lacks many pointer/touch related events that I need. I managed to convert the bitmap system to pure PIXI sprites. But, sprite.interactive = true; sprite.on('pointerdown', foo) is still not working. I thought that maybe MV ov
  4. Hello guys, i am currently building a simple 2D platformer and want to create a simple interaction between my main character and a NPC. Im trying to figure out which functions i should use for this scenario: What i want to achieve: Main character walks until it reaches the sprite of the NPC. Soundeffect plays only one time and speechbubble (i will use a simple image) appears. Speechbubble can only be confirmed by pressing Enter. While speechbubble is not confirmed character cant move. When player hits enter, speechbubble disappears and character can pass the NPC w
  5. Hey everyone, this is my first post, so I hope I do this right. Let me explain, what I wanted to do: I created a GameObject class so that all my objects inherit from this class. The GameObject is interactive and I was thinking about to give it some default methods, that can be used for: this.on('pointerdown', <__put_default_function_here__>); If an object that inherit from GameObject needs a different action as you click on it, you can simply switch the callback function to another default method or you could create a new method inside the new object. So one of thi
  6. First of all, let me say that I love the apparent philosophy of PixiJS: do rendering well, and let userland be userland. Awesome. I'm playing with different ways of handling interactions that originate within the scene graph. I'm not a fan of declaring interaction logic on sprites themselves (e.g., using the '.on' method and callbacks). Instead, I'd prefer something that functions more like event delegation: a single listener on my scene that pipes out all relevant events for me to slice and dice later. Currently, I'm experimenting with using the Sprite prototype to feed all eve
  7. Hello. I am very new to PIXI, so please bare with me. I have been in search of good API for my game. The game uses a map which contains tiled images as well as a bunch of path on the screen. Think Google Map, except a lot simpler. I was able to use PIXI to implement the map background where it scrolls and loads tiled map images as needed. I was also able to draw paths onto the map. Now the problem is that I cannot figure out how to interact with those paths. I used PIXI.Graphics to create and draw a path. I applied mouse events to it. But no event is fired. I
  8. I have pixijs webgl app with some inputs. I have an input which uses native html input which placed out of scene and dispatches some events to my input and so on (like old pixi.input project) Yesterday I've update pixijs from 4.3.5 to 4.4.1, and input has broken. When hidden input is focused and I've move mouse (like usual text selection) native unfocus event has been emmited on my hidden input without stack trace (by browser as I think). Keydown events also doesn't work on hidden input (maybe it previously unfocused by mouse up or mouseclick event after it has been focused).
  9. Here's the thing: If I create a sprite or graphics, and add a mousemove handler for it, then what I expected to happen was that whenever I move my mouse over that element, that handler gets fired, but that's not what's happening, and that handler gets fired when you move the mouse over the entire canvas, why is that? var el = new PIXI.Graphics(); el.interactive = true; el.buttonMode = true; el.beginFill(0x00FFFF, 1); el.lineStyle(4, 0xFF0000, 1); el.drawRect(0, 0, 100, 100); el.endFill(); el .on('mousemove', move) .on('touchmove', move); stage.addChild(el) function move() {
  10. Hi, my project with BabylonJS is growing day to day. Now, I am going to introduce interaction to my scene. I dont know how can I get this. I would like click to some object and see on screen show information of it. To do this I need to know differents way to interact with objects of scene. Also using a gui, I am interested to hide or show differents elements of my world. Could you show me similar examples? Thanks.
  11. When profiling my game in chrome, 8-20% of the time is spent in processInteractive(), but to my knowledge I haven't enabled interactions. Is there a way to turn them off? Is there a way to turn them on *accidentally* ? Perhaps by adding a function to a pixi object like sprite.onmousemove = fn; or something like that? The game is live (works best in Chrome, not sure about the others) http://sharkz.io/ . If you play it and run the profiler you can see what I mean. I've also attached a screen shot of the profile. The source code is http://sharkz.io/js/app.js which I've searched for the
  12. How can we define a hitArea for a quadraticCurve line? is that even possible?Afaik, you got:PIXI.RectanglePIXI.CirclePIXI.Polygonfor defining hitArea,It seems that it's not possible, right? from https://github.com/pixijs/pixi.js/issues/3296 http://codepen.io/mohammad-ahmadi/pen/pNKOZQ?editors=0010
  13. Setup: There are multiple display objects which are at the same level on the scene hierarchy graph. These display objects have overlapping hit areas (e.g. they are near each other and/or the hit areas are large) The user touches the area where the hit areas intersect It seems that pixi will trigger the touchstart event on only one of these display objects. How do I get the event to fire on both? My Goal: I have multiple objects which the user can drag around the scene. However, I want to allow the user to be quite inaccurate with their finger, so that if they at
  14. Let's say I click on a sprite, which might be nested in other containers and so on, each with their own onclick event listeners. Each of those objects will fire an onclick event, with the most nested object firing first. What's the best way to go about passing information about the inner nested click events to the outer objects? To put it more specifically, how can I let my outer objects know if their click event originated as a direct click to them, or as a click to another object that bubbled through? I attempted to attach a property to the nested onclick event like so: var but
  15. I've been trying to implement drag and drop for some of the sprites in my project. I've managed to get it working to some extent using code that I found in a tutorial/example somewhere - the exact source escapes me, apologies. (It's in typescript but should be pretty much recognisable as js) constructor() { this.on("mousedown", this.startDrag); this.on("mouseup", this.endDrag); this.on("mouseupoutside", this.endDrag); this.on("mousemove", this.onDrag); } private startDrag(e: PIXI.interaction.InteractionEvent) { this.dragging = true; e.data.getLocalPosition(this.parent, this.las
  16. That's mah fork: https://github.com/gameofbombs/ This branch is also known as dev-experimental-geometry and pixi v4.1. It is the bleeding edge, and only about 5% of it was discussed as PRs in main pixi.js (like https://github.com/pixijs/pixi.js/pull/2465 ) Demos: http://gameofbombs.github.io/pixi-bin/ Best demo is outdated, though it will be converted to pixiv4 soon: http://monsterisland.chimeracompanygames.com/lux-demo/index.html (use mouse and QE) Changes: 1. 3d Transforms. We have them now. 2. Static transforms: enabled by default, new Transform2d(true),
  17. Hello, I'm working on a close source project so the amount of example code I can supply is relatively limited, so let me see if just simply describing my problem will help. We have three containers, linePoints and lineSegments, these containers are children of the line container. They are all interactive and in buttonMode We have two types of sprites, the points, and segments, these are children within their respective containers. These sprites are created also interactive and in buttonmode with events tied to them. Points get all of the drag related events (mosedown, mouse
  18. Hello, I've got a problem that is starting to impact the performance of my game and I found through profiling that the MouseMove & ProcessMouseMove, are binded to the window "mousemove" event. They do fire correctly, but I simply need them to fire once per frame. ( They fire 5 - 10 times per frame which is normal ) Is there a way to do this in pixi with interactionFrequency, or do I need to do some hack ? Thanks in advance
  19. In many forums and blogs pixi seems to have interactive sprites http://www.goodboydigital.com/pixi-js-now-even-better-at-being-interactive/ http://www.goodboydigital.com/pixi-js-gets-interactive/ mySprite.mouseupoutside = function(mouseData){ console.log("MOUSE UP OUTSIDE!");}mySprite.mousemove = function(mouseData){ console.log("MOUSE MOVE!");}mySprite.touchendoutside = function(touchData){ console.log("TOUCH END OUTSIDE");}mySprite.touchmove = function(touchData){ console.log("TOUCH MOVE");}yet i see nothing about it in the documentation: https://pixijs.github.io/docs/PIXI.Sprite
  20. I am testing gameplay mechanics with Phaser and I am trying to have one character communicate a simple message to another when they are facing each other. Is there a way I can mimick this dialogue box using Phaser? So basically, when one sprite collides with another, I want to show this box with a message in it possible give the user input choices. Ex: "What is your name?" User choices would be: "x", "y", "z" and an "Answer" button.
  21. I am having a problem getting Phaser to use Buttons and implement their click features when I include my CSS style sheet. I am guessing that it has to do with containers and positioning but would like some help as I have been stuck on this for several hours. The code for my php index page is below: <html> <head> <title>Border Test</title> <script type="text/javascript" src="globals.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="phaser.min.js"></script&g
  22. Hi all, Im trying to get my Twistfilter offset to follow my mouseposition across the screen on mouseDown... been at this all day, poured over the documentation and tried multiple ways... no luck.. any help would be greatly appreciated. So far I have this: // sets up the screen/stage var viewWidth = 1000; var viewHeight = 500; var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";document.body.appendChild(renderer.view);var stage = new PIXI.Stage(0xffffff, interactive);var interactive = true;//adds the flag as a spritevar fla
  23. Hello guys, Just recently encountered a problem when using onMouseMove on a Samsung Tablet. I had to add prevent default to my onMouseMove handler function to fix the problem. I took a look in the PIXI docs, and saw that: if (PIXI.AUTO_PREVENT_DEFAULT) { this.mouse.originalEvent.preventDefault() }isn't included in the onMouseMove function. Is there a reason for this?
  24. Hi I am trying to get the id of the shape my mouse is currently hovering over. my shapes are in a container // creating the layers gridLayer = new PIXI.DisplayObjectContainer (); gridLayer.setInteractive(true); stage.addChild(gridLayer); and i am creating each shape like this; function drawHexagon(x,y, size, gap,scale, color, iterI, iterJ, type) { var shape = new PIXI.Graphics(); // set a fill and line style shape.beginFill(color); shape.lineStyle(1, 0xa0a0a0, 1); size = size-gap; for (i = 0; i < 7; i++) { angle = 2 * Math.PI / 6 * (i + 0.5);
  25. Hi guys, We have been building a framework called UniWand that enables controlling online 3D content using smartphones as wand controllers with latency < 20ms. It can be used to control WebGL models based on the how you hold the phone in your hand. Here is a one minute video showing some of the demos: http://www.youtube.com/watch_popup?v=XFcH1Rm8Doc&vq=large You can try out the beta version from this location : http://app.uniwand.info The other useful features that it can enable are: Second screen for online videos (similar to that of YouTube) Tablet companion apps for e-learning conten
  • Create New...