Search the Community
Showing results for tags 'interactive'.
Found 23 results
-
Hello, everyone I am presenting a project which will be a good contender to immersive navigation environment, but the immediate goal is a mindmapping tool. Programmers skilled in 3d, dataminning, integrating big data, and others will be essencial to the development. A challenge is here for programmers who dwell in visual thinking and make use of mindmaps and would like to improve them. A challenge to build a 3d environment for mindmaping, with stunning compartmentalization and interaction, recursiveness, big data integration, and enhanced visualization. I have a couple of ideas on how to proceed for a good base, and a couple of interconnected mindmaps I would gladly beta test on, and I'm sure if we share to the mindmaping community, new ideas and concepts will emerge to better a product that will be, ultimatelly, a dynamic tool for all sorts of navigation and interaction with data. V2.0 will include a separate class which retrieves and catalogues your browser favorites, retrieves the tags from each, and draws the relations inspired by what was achieved here http://www.bestiario.org/research/videosphere/, then creating an interactive representation. But that's for later... I am a private individual, I don't have commercial interests in this endeavour, and am willing to share the ideas with people interested, and with the ability to do it, so I can see it come true. I initially posted this before reading the guidelines, for which I apologize. -
Hey everyone. I am building a web based 3D interactive showcase of a spacecraft's journey. Most of the users are expected to be accessing it via low to mid range androids, so for performance I've decided upon three.js, rather than babylon.js. Correct me if I'm wrong in this. I've worked as a web developer and dabbled with game development with Phaser and Godot, but haven't built anything with three.js or babylon. So I wanted your advice on best practices and resources; things that my future self would wish I had known before starting. Here's some more information: The showcase will be separated into scenes, which can be navigated via a timeline, which also highlights the current date, if it's in range. In addition to the animated view of spacecraft's trajectory and position, it will have some cinematic scenes of the rocket exiting the atmosphere and a lander landing on the target body as well. I might even consider making the rover user controllable. Here's one inspiration from NatGeo. Any help is appreciated.
-
Hi all, I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this: What I have so far is just a test of one of the sprites I put together: mae.mp4 The sprite is made using just one layer, at the moment. Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that. So, examples/tutorials/advice I'm looking for regards: -Building multiple menus of images, each accessible by clicking on relevant category titles. -Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc) -Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time) -How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?) Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too. -
When I attach an event to a sprite, like sprint.on('click',clickresponse) I would like to know which of the hundreds of sprites fired this event. But somehow the event does not contain a pointer to the sprite that fired the event. I would have thought currentTarget would be a good candidate to test for it, but that one seems to be null allways. How to figure this out?
-
Hi, Pixrs I'm new to PixiJS and would like to ask a question about how to do a delay on mouse move using Pixi (on the element that has the Displacement filter), I removed a part of the example code that is on the official PixiJS website. I created a div (#follow) to show how effect I wish. Anyway, I would like the element to follow the mouse in a smooth way. Code is in Codepen: Thanks
-
Hello everbody, I am new to this Forum. So please forgive me if I posted in the wrong thread. I am developing an Interactive visual novel made out of videos and video loops. Build up: - play video, go to loop; - choose dialog in loop; - play video, then go to action loop; - play mini game in action loop; - if won, repeat same process in different level, or game over. There are two things that I am struggling with: 1. How do I play an loop, after an video has been played? 2. I want to add an button during the loop, that will switch to an different video, depending on if it has been clicked fast enough in an certain time or not. I would be grateful for tipps. Thank you in advance!
-
We're looking to re-create the 3D element of this interface https://xboxdesignlab.xbox.com/en-gb/customize?productid=900WZDF9XJVG We will be building internally the 2D interface, which will allow users to change the colours of an SVG model clicking items from the right hand side list (similar to example site) We're looking to work with a developer to create the 3D model, that will work with our code to change the colour of the 3D model. We will supply the 3D model in a useful format for the website (essentially whatever is required). The 3D model will need to be interactive (exactly like the example site) Clicking the buttons on the right needs to automatically rotate the model appropriately to pre-defined position (exactly like the example site) I'm hoping that the completed code will allow us (if required) to add colours at a later stage (if required) and additional automatic rotation points. Ideally also we would be able to swap out the 3D model if required without needing to re-code the whole project. The 3D solution needs to be standalone, in that we can host it anywhere without any dependancies. Please let me know if you have any questions or are interested in this project. I really need to get an idea of costs/timescales to develop this, examples of similar work would be preferable, the example site is build using Babylon.js. Thanks Dave -
I want to create a city builder. Some objects will have transparent pixels, but they still capture click events. Is there a way to figure out which object was clicked in a way more advanced than just rectangles for shapes? I'm thinking I might have to figure out the click coordinates, then iterate over all objects in that point, starting with highest z-order, until I reach a non-transparent pixel.
-
processInteractive() being invoked without interactions enabled
timetocode posted a topic in Pixi.js
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 strings 'interactive', 'interaction', 'interact' which do not appear as far as I can tell. Thank you! -
If I set a parent to be interactive and then add some interactive children to it, their defaultCursor property does not work. Demonstration. Should be pretty obvious what I am trying to do, but in case it's not: I intend to allow the user to scale that green thing with those handles. The code to look at is let handle4 = new PIXI.Graphics().beginFill(0xFF0000, 1).drawCircle(handleRect.x+wonderfulRectangle.width, handleRect.y+wonderfulRectangle.height, 10).endFill(); handle4.interactive = true; handle4.button = true; handle4.hitArea = new PIXI.Circle(handle4.x, handle4.y, 10) handle4.defaultCursor = "nwse-resize"; handleRect.addChild(handle4); handleRect is added to the wonderfulRectangle. wonderfulRectangle is interactive (can be moved around as you can see). If I set defaultCursor on the wonderfulRectangle (i.e. - parent), it works fine. But neither handleRect nor handle4 work. Is this a bug, or am I missing some undocumented steps here?
-
Hi gang, Allow me to introduce myself with this first post about my game under development. After finishing my first beta (there's some dev versions before that) I decided to go out into the internet to find like-minded souls. The current beta only shows the interactive graphic novel but that's a branch within the 'framework', another branch is a point and click adventure (links below). Be advised, I *do* intend to make adult material, ranging from tongue in cheek erotica (think Leisure Suit Larry) to X rated stuff but you don't get NSFW thrown in your face at splash. Actually, you don't get to see anything that's not decent until you explicitly make that choice, and you'll recognise it when you get there. it's pretty hard to miss I started on this because I was in a moment of distraction looking for some decent adult 3DGCI entertainment and found it all wanting, boring, predictable. Simple 'click through to get to the action' and even the action was boring. Sure, my beta isn't completely out of those woods yet, sorry for that but you can already make unexpected mistakes. The current main source of information about this game, with details about concepts, reasons, contemplations (including the 'Feminist Dilemma :P), future development & many screenshots etc is my blog "Diary of a Porn producer", started with a touch or irony because I didn't think I'd embark on that venue (I used to make 3D Virtual Learning environments in a University) It's here. It's completely safe for work. I'm especially proud of my seamless embedding of MPG4 animations while still allowing for drawing of interaction components, tell me what you think. Both can be reached via the main entrance which immediately shows adult material (nothing extreme but the woman isn't wearing anything). So, alternatively; these are the two versions which start safe for work. Here's the current beta (which shows the outlines of the interactive graphic novel / game) Here's the previous dev demo (which shows the point and click adventure and has choices for 'content intensity') Best played on desktop/laptop, it workd on mobile but is rather small and misses 'mouse over' functionality. Also, the site is completely clean, just the game, no ads, banners, pop-ups, cam girls etc... Hope you have a bit of fun regards ~william links to screen shots (that are completely safe for work, no nudity, adult language though) warning splash entry interactive novel 'Tuition Fees' You can get it wrong in 'Tuition Fees' And in 'Private Tutor' the reaction at the first meeting depends on your previous choices (ok, it's a point and click adventure but you don't need to grab everything you can!), she can be neutral, pleased or angry
-
I wonder whether it is possible to translate browser viewport on Plane in 3D world. Like video texture on plane. And If this 3D plane can be interactive like browser is ??? Just ask how it is with this. Could be that possible to do? Could we have more browsers planes in 3d world which will be interactive? greetings
-
Hi I have a button that I've created from a png image But the hitArea sits outside of the image (even the canvas!) I've uploaded a zip file Hopefully someone can help Thanks hitArea.zip
-
The PIXI.sprite, which is underneath a PIXI.particles.Emitter, has some bound mouse events - mouseover and click... but they are being blocked by the particles. When mousing over the sprite or clicking on it, the event is not fired. I found someone having the same issue, and his solution was to set the containing PIXI.container's interactive property to false: https://github.com/pixijs/pixi.js/issues/1725 However, in my situation, I require that the container be interactive for dragging and zooming the map. How can I allow the sprite's mouse events to be fired, regardless of whether a particles emitter (or even another non-interactive sprite) is overlaid on top of it in respect to the z-axis - while still keeping the container's interactive=true?
-
Hello, I am interested to use a 3D "engine" in my browser. I wouldn't consider my project a full-on "game" per se. What I have is a configuration for a sports field arena, so want to engage with the configuration, and to manipulate the canvas and scene objects according to the configuration. Things like field length, width, goal posts, and so on. I am using ASP.NET MVC for my web platform. The configuration part is basically working but for some CSS snafus; but that's well outside the 3D scope of things. I am interested to find out how I might have a 3D canvas/scene "listen" for the form input and respond accordingly. Last but not least, would it be possible to provide a NuGet package for the Babylon bits? THREE has one, although admittedly, the NuGet specification appears to be several revisions old. Thank you... Regards, Michael Powell
-
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
-
I have a game world that is essentially a PIXI.Container with a bunch of sprites in it. I want to tap/drag to move the world around, but the problem I seem to have is the width/height of the Container is 0, 0. So I can fire events if a sprite within that Container is tapped/dragged, but not every part of the screen will have a sprite, how do I set the width/height of the Container to listen for events on the entire window?
-
Everywhere is written that for interactive events you need to set the flag sprite.interactive = true; but docs have no such Sprite properties. How did a "make" events? -
He had Schizophrenia, he loved pho, he was our friend. I've been working on an interactive story based on voicemails that Bruce left me. Check it out: MeanVoices.com Direct Link to "game": MeanVoices.com/story.html Definitely been dealing with audio file size issues and loading speed.
-
I have a canvas with a set aspect ratio of 16:9 and I am resizing the renderer every time the window size changes game.resize = function() { var original = _default_screenWidth / _default_screenHeight; var designer = window.innerWidth / window.innerHeight; if ( window.innerWidth < _default_screenWidth || window.innerHeight < _default_screenHeight ) { if ( original > designer ) { game.renderer.resize(window.innerWidth,window.innerWidth/original); } else { game.renderer.resize(window.innerHeight*original,window.innerHeight); } _DOM.style.width = game.renderer.width; _DOM.style.height = game.renderer.height; game.stage.scale.x = game.renderer.width / _default_screenWidth; game.stage.scale.y = game.renderer.height / _default_screenHeight; } }; window.addEventListener("resize",game.resize);Problem is if I tap certain buttons (PIXI.Container) , they are not firing, only if i tap a little bit lower, so it's only the Y axis that's off. Here is the code for the button if ( Game.mobile ) { button.container.interactive = true; button.container.buttonMode = true; button.container.tap = function() { button.Press(); }; }If the window does not need any scaling then everything works fine.
-
Hello everyone , I am happy to share my webpage with you. I hope this is not breaking the rules because it's not exactly a game. It's kind of interactive cv or portfolio that I belive will help me find a job as a game developer. I hope you like it Page: smithchris.com Cheers Chris
- 3 replies
-
- 1
-
-
- Job
- Interactive
- (and 2 more)
-
Hey, So I'm making a drag and drop type application in pixi that masks sprites if the mouse is inside a box. It looks like this: http://gyazo.com/e658aef16a76b78014c6892eee5c82bd Now the problem is I'm trying out pixi's interactive mode to do the dragging, but as you can see from the gif although the sprite is masked, its still clickable outside the box. I'm just wondering if theres any neat way's of negating the clicking, maybe using some built in functions that I'm unaware of. I can think of a few ways of doing it, right now the way I will probably do it will be simple checks on the bounds to see if I'm allowed to select it.
-
I have an object that contains a Sprite and I set that sprite to be interactive and set all the interaction callbacks however when I add a few of them to my scene I must touch the last added one before the other's will send the touchmove event (touchstart, and touched are still being called). The mouse events are called fine when played in a browser, this issue arises when I play on my iOS devices. MySprite NameSpace.MySprite = function(){ this.selected = this.selected.bind(this); this.dragged = this.dragged.bind(this); this.deselected = this.deselected.bind(this); this.sprite = PIXI.Sprite.fromFrame("sprite01.png"); this.sprite.interactive = true; this.sprite.mousedown = this.sprite.touchstart = this.selected; this.sprite.mousemove = this.sprite.touchmove = this.dragged; this.sprite.mouseup = this.sprite.mouseupoutside = this.sprite.touchendoutside = this.sprite.touchend = this.deselected;}NameSpace.MySprite.prototype.constructor = NameSpace.MySprite;NameSpace.MySprite.prototype.selected = function(data){ this.data = data; this.dragging = true;};NameSpace.MySprite.prototype.dragged = function(){ if(this.dragging) { this.destinationX = this.data.getLocalPosition(this.container).x; }};NameSpace.MySprite.prototype.deselected = function(){ this.destinationX = this.sprite.position.x; this.dragging = false; this.data = null;};Create MySprites this.sprites = [];var sprite = null;for(var i = 0, spriteCount = 5; i < spriteCount; i++){ sprite = new NameSpace.MySprite(); this.sprites.push(sprite);}
