Search the Community

Showing results for tags 'pixi'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 413 results

  1. Is there a way for PixiJS (or any plugin/script) to return the color value of a sprite if given a point value to check? What I'd like to do is create a collision map, which would be a large sprite with nothing but black and white shapes. This sprite would be on it's own layer underneath a painted background image. a character sprite would move around on a layer above, and any time the edges of it collides with a black part of the collision map, it would hit a wall.
  2. Hello, First time posting on this forum. Issue: I am having issues using TweenMax when rendered in WebGL with PIXI. Nothing happens at all. If I change my code to use canvas it works just fine. Is anybody having similar or the same issues? Thanks for any help. let app = new PIXI.autoDetectRenderer(1920, 1080); document.body.appendChild(app.view); let stage = new PIXI.Container(); let testGraphic = new PIXI.Graphics(); testGraphic.beginFill(0x18FF10); testGraphic.drawRect(0, 0, 500, 500); stage.addChild(testGraphic); TweenMax.to(testGraphic, 1, {pixi: {alpha: 0}}); app.render(stage);
  3. Hi, I'm a designer and I'd like to reach out to others for input or even collaboration. Lots of my javascript work is on github in the spirit of sharing and learning together. Like an open source sketchbook. I like making small experiments that might be included in something bigger. I often play with mechanics, audio and visual elements to look for interesting things : http://type76.com As you can see, it's lots of generated, three.js and canvas stuff, with a game dev leaning. I'm keen to go in new directions too. It's hard to find interest among my social circles, so I'm reaching out here to see if people are into this kind of thing. It's not business. It's about hitting ideas off each other, collaboration, fun and learning together. Maybe we can make an itch.io page if there is the will. You're welcome to join the discord server : https://discord.gg/KUqcuWu I'd love to see your experiments. Here or on discord. Things that aren't full games, but are fun and interesting concepts. This seems the place to look for like minded folks. Have you got a sketchbook? Is there a good CMS for this? I might be doing it wrong. Are there any other communities for this apart from discord servers full of revshare projects?
  4. I’m building a SPA (vue js + vue router) combined with some pixi js (v4.8). The main features I use are : - image sprites - video sprites - some pixi texts - displacement filters Depending on the view, there may or may not be a canvas/renderer. But I always cleanup after myself before switching views by : - destroying every sprite and their baseTexture (image, video, filter sprite) -> .destroy(true) - destroying every text and their baseTexture -> .destroy(true) - clearing any filters used -> container.filters = null - and finally destroying the main renderer -> renderer.destroy(true) By doing so, my SPA is running smoothly (chrome, firefox, edge), no matter how many view switches occurs, and I don't get any console errors. However, safari (12.0.3 in my case) simply doesn't seem to take any cleanup seriously, after 4/5 views switching the performance drastically drops and I get many console errors : _There are too many active WebGL contexts on this page, the oldest context will be lost._ and _WebGL: INVALID_OPERATION: loseContext: context already lost_ . And if we continue browsing between views, safari will be forced to crash. Even if I manually try to kill my renderers with _gl.getExtension('WEBGL_lose_context').loseContext()_ , the problem remains. Am I missing something or is it just the way Garbage Collection works in safari (being less effective, and not properly releasing memory)?
  5. Hello! I have a square picture,Now I want to cut this picture into a hexagonal picture without using photoshop. Is there any good implementation idea? mask?or frame?
  6. I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial
  7. Looking to hire Pixi and Phaser developers for Noida location. Interested members please PM me or can send over the Resume to hr@t7gaming.com
  8. Hey guyz, Is there any editor I could use for proton particle
  9. Hello. I'm making example filter with custom fragment shader. This is what I have in terms of shader code so far: //fragShader struct SomeInfo { vec4 color; }; uniform SomeInfo c; void main() { gl_FragColor = c.color; } The idea is to (eventually) make c into an array of Infos, which would be then operated on by the shader. What I'm struggling with is the definition of filter: how do I declare the uniform to be of type SomeInfo in Js code? I assume in plain WebGL, I'd have to bind uniform location (of c's property) by calling gl.getUniformLocation(program, "c.color") and create a uniform with appropriate gl.uniform4f(location, /* bunch of values*/), but can I do something similar via the existing filters means? Relevant part of my Js code looks like this: //Define base filter class for our future shaders/filters PIXI.filters.CustomFilterBase = class CustomFilterBase extends PIXI.Filter { constructor({ vertexSrc = null, fragmentSrc = null, uniforms = {}, enabled = true, debug = false, name = null } = {}) { if(debug && fragmentSrc !== null) { fragmentSrc = "#define DEBUG \r\n" + fragmentSrc; } //Add dimensions for scaling uniforms.dimensions = { type: 'vec2', value: { x: 0.0, y: 0.0 } }; super(vertexSrc, fragmentSrc, uniforms); name ? this._name = name : this._name = "CustomFilterBase"; this.autoFit = false; this.enabled = enabled; } apply(filterManager, input, output) { this.uniforms.dimensions.x = input.sourceFrame.width; this.uniforms.dimensions.y = input.sourceFrame.height; // draw the filter... filterManager.applyFilter(this, input, output); } } //Shader for prototyping and testing PIXI.filters.TestFilter = class TestFilter extends PIXI.filters.CustomFilterBase { constructor() { let fragmentSrc = document.getElementById('fragShader').innerHTML; let uniforms = { //What do I do here?! c: { type: 'vec4', //Judging by GLSL_SINGLE_SETTERS, only GLSL's primitives are recognized value: new Float32Array([0.0, 1.0, 0.0, 1.0]) } }; super({ vertexSrc: null, fragmentSrc: fragmentSrc, uniforms: uniforms, name: 'testfilter' }); } } (using pixijs v4.8.7) The expected result is green screen, as it is if I declare c as vec4 in shader code, but alas the screen is black, hinting on c's value being default constructed / not properly assigned Any help is appreciated, cheers! P.S. I tried to find similar cases from this forum and stackoverflow, but it seems that few people use structs in GLSL code. P.P.S. If it is of any help, I found that PIXI.glCore.shader removes specific characters from uniform's name (which looks like a hotfix rather than a feature) and that in fact one of iterations uniformData's name is 'c.color'. /** * Extracts the uniforms * @class * @memberof PIXI.glCore.shader * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param program {WebGLProgram} The shader program to get the uniforms from * @return uniforms {Object} */ var extractUniforms = function(gl, program) { var uniforms = {}; var totalUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); for (var i = 0; i < totalUniforms; i++) { var uniformData = gl.getActiveUniform(program, i); var name = uniformData.name.replace(/\[.*?\]/, ""); //<----- Here it is!! var type = mapType(gl, uniformData.type ); uniforms[name] = { type:type, size:uniformData.size, location:gl.getUniformLocation(program, name), value:defaultValue(type, uniformData.size) }; } return uniforms; };
  10. hard75

    Pixi js editor

    Hi, i want to know if pixi js have a editor that it can to handle the graphic's pixi and it drag and set your position, this graphics: var app = new PIXI.Application(800, 600, { antialias: true }); document.body.appendChild(app.view); var graphics = new PIXI.Graphics(); // Rectangle graphics.beginFill(0xDE3249); graphics.drawRect(50, 50, 100, 100); graphics.endFill(); or i use tilemap editor but i don't know if tilemap edito can to handle graphic's pixi,
  11. I am trying to create a click through image gallery for a project in pixi. You can see in my fiddle when you click on the right side of the screen it adds the next image. The problem is when you click on the left to delete the image it will only delete one and not the rest. Can someone please help me with this issue. If you have any more questions, please feel free to ask. If there is a better solution please let me know. https://jsfiddle.net/jacob_truax/5p4n9a8m/2/ const createSprite = function() { imageCreated = true image = new Sprite(resources[images[step]].texture) image.width = 400; image.height = 300; image.x = left app.stage.addChild(image) step += 1 left += 40 } const removeSprite = function() { app.stage.removeChild(image) step -= 1 } loader.load((loader, resources) => { createSprite() }) nextTag.addEventListener("click", function() { console.log("next") createSprite() }) backTag.addEventListener("click", function() { console.log("back") removeSprite() })
  12. So I have loaded an array of images and added one to my stage. Basically I want to click through the image sprites that I have loaded with the left and right arrow keys. I thought about adding them all to the stage on top of each other and using z-index, but I feel like there would be a better way of filtering though all my loaded images. Plus I read through this documentation and was pretty confused implementing it. Here is my code so far. Its not much as I am new to pixi and still learning, but any information would be helpful. <script type="text/javascript"> let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type) // Aliases let Application = PIXI.Application, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Create a pixi application let app = new PIXI.Application({ width: 2000, height: 2000, transparent: false, antialias: true, resolution: 1 }) //Add the canvas that Pixi automatically created for you to the html document document.body.appendChild(app.view); loader .add([ "lib/book1.png", "lib/book2.png", "lib/book3.png", "lib/book4.png", "lib/book5.png" ]) .load(setup); //Define any variables that are used in more than one function let cam; // Setup function function setup() { // Creating cam sprite from image cam = new Sprite(resources["lib/book1.png"].texture ); cam.width = 400; cam.height = 300; app.stage.addChild(cam) </script>
  13. var imageContainer = new PIXI.Container(); PIXI.loader.add("http://127.0.0.1:54508/resources/data/data.jpg").load(function(loader, resources){ var base = resources['http://127.0.0.1:54508/resources/data/data.jpg'].texture.baseTexture; var maxWidth = 2048; var maxHeight = 2048; for (var x = 0; x < base.width; x += maxWidth){ for (var y = 0; y < base.height; y += maxHeight){ var minWidth = Math.min(maxWidth, base.width - x); var minHeight = Math.min(maxHeight, base.height - y); var canvas = document.createElement('canvas'); canvas.width = minWidth; canvas.height = minHeight; canvas.getContext('2d').drawImage(base.source, -x, -y); var texture = new PIXI.Texture( PIXI.BaseTexture.fromCanvas(canvas), new PIXI.Rectangle(x, y, minWidth, minHeight) ); var sprite = new PIXI.Sprite(texture); imageContainer.addChild(sprite); } } viewport.addChild(imageContainer); }); This is a silly question but i'm banging my head for an hour and can't figure it out I'm trying to split an image into smaller texture chunks but i'm getting frame does not fit inside base texture dimensions and i'm not sure why this is happening The image height is 3106 and after the second iteration of the inner loop the y is 2048 and minWidth = 1058 so it should work there is not third iteration of the inner loop to give out of bounds error ... Thanks for reading . also i'm not familiar with ES6 yet, so don't judge
  14. Hello! I'm trying to adapt shaders from this sample to Pixi JS custom filter: https://jywarren.github.io/fisheye-correction-webgl/ https://github.com/bluemir/fisheye-correction-webgl Unfortunately something is wrong with coordinates (though i'm using webgl code as a reference, but copy-paste to pixi doesn't work), i've tried this manual about Filter Area https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters and this topic but it didn't help. maybe because in my case there is vertex shader also. Here is fiddle with my code where the problem exists https://jsfiddle.net/f1nal/a5t07f3p/ Can someone explain how to do it right? ivan.popelyshev can you help me?
  15. Hey guys! I need to have my site working in Safari 9 and IE11 but I've noticed that there is ES6 code in the pixi.js bundle. Has anybody else encountered this? Looks like it's coming from the mini-signals dependency. I have tried adding pixi.js and mini-signals to my include config for babel-loader but it's still not being transpiled. Any ideas of a solution?
  16. Hi guys! New with PIXI and have some troubles with loading audio with PIXI.loader. startButton.on("pointerdown", function(){ changeLanguage('eng'); startAnimationBoard(); }); espButton.on("pointerdown", function(){ changeLanguage('esp'); startAnimationBoard(); }); function changeLanguage(lang){ if( lang == 'esp'){ sound.add('sceneLogo', './objects/mp3/esp/1.mp3') .add('scenePlay', './objects/mp3/esp/2.mp3') .add('sceneBalance', './objects/mp3/esp/3.mp3') .add('sceneHello', './objects/mp3/esp/4.mp3') .add('sceneInteractive', './objects/mp3/esp/5.mp3') .add('sceneAirport', './objects/mp3/esp/6.mp3') .add('sceneDownload', './objects/mp3/esp/7.mp3') .add('sceneData', './objects/mp3/esp/8.mp3') .add('scenePerson', './objects/mp3/esp/9.mp3') .add('sceneFinal', './objects/mp3/esp/10.mp3') .load(); } else if(lang == 'eng'){ sound.add('sceneLogo', './objects/mp3/eng/1.mp3') .add('scenePlay', './objects/mp3/eng/2.mp3') .add('sceneBalance', './objects/mp3/eng/3.mp3') .add('sceneHello', './objects/mp3/eng/4.mp3') .add('sceneInteractive', './objects/mp3/eng/5.mp3') .add('sceneAirport', './objects/mp3/eng/6.mp3') .add('sceneDownload', './objects/mp3/eng/7.mp3') .add('sceneData', './objects/mp3/eng/8.mp3') .add('scenePerson', './objects/mp3/eng/9.mp3') .add('sceneFinal', './objects/mp3/eng/10.mp3') .load(); } } Works perfect everywhere, except iOs Safari browser. Loading time from 300 ms on desktop Chrome to 1600 ms on old Droid phone (Chrome and Default browser). But mobile Safari loading time is awfull - 35000 ms. Tried to load files separatelly, one by one before using them (don't need them all at once). And still works everywhere except mobile Safari - in this case files didn't load at all. Don't know what I'm doing wrong. But I really tired in this war against Apple gadgets. Thank you! P.S. : iOs versions 10.1.x and 12.1.x
  17. Minus the choice. and adventure. Day Job is a delve into the mundane. Play the role of a generic office worker. What do you do? Work, slack, or consume. Once you finish your day at work a narrative will occur to your character. This is based on your character's personality. Whoa, that's right. Getting psychological up in here. We actually follow The Big Five Personality Traits and narratives and items both affect these traits. Some narratives require a certain range of trait values. The game itself is made using angular2pixi (found here) which we created to integrate Pixi into Angular2+. The code itself should be obfuscated, so no peeking BUT we are more than happy to answer any questions about the development of the game. Overall, making Day Job was a grandly satisfying endeavor and we hope to grow it into something great. The narratives in the game right now are placeholder while we work on the real story. We hope to cleverly explore the human condition and poke fun at capitalism, consumerism, and modern day wage slavery. If you'd like to follow our fledgling game studio or stay up to date on Day Job development make sure to subscribe to us on social media: https://medium.com/@rhgames https://twitter.com/RbtHGames Enjoy! Browser: http://day-job.io Android: https://play.google.com/store/apps/details?id=com.rabbitholegames.dayjob&hl=en
  18. This is a new (well, newish, but only recently completed & released) match 3 game in the style of an old slot machine. Have a play here:
  19. Hi there, I'm working on an app showing user uploaded maps (bitmaps). These maps can be of any resolution and often they are very large. Now down-scaling these images they become ugly and crunched, so I need to use mipmapping (Working in WebGL). I know mipmapping only works with "powered by two" resolutions, but is there any way I can resample my odd-sized maps, to fit into a "pb2" resolutioned baseTexture, and still know the original specs. Or how would you work around it? Thanks
  20. Hello everyone! I found that using filters to multiple sprites is causing frame drop(in my case 25 filters). After the frame is dropped, if i remove filters via console , the frame is again 59.9-60.0 . I will append image to show you what i mean.The way i append filter to sprite is in this way : var spritesLen = 25; for(var i=0;i<spritesLen;i++){ someSprite[i].filters = [myFilter] } I hope there is a fix to this issue :) Thanks.
  21. We have atlas exported with Texture Packer. Run-time every texture is cropped by 1 pixel. This pixel is added to the opposite of the texture. Likewise https://github.com/pixijs/pixi.js/issues/5087.
  22. Beppigames Puzzles Two non-casual puzzles I made some years ago, both original concepts. Made all puzzles first on board/paper, no generators involved. Mandatory to read the games rules, in game or on games homepage (game rules link). 1. Sandcastles Direct Link Game Rules A 30 level sliding tile game at the beach. You slide around "digging tiles": Where these cover sand diggings take place. Where your channels tap water they are flooded. Two objectives: 1. Every sandcastle in a level needs to be on its own island. 2. All seastars in a level need to be put into water. Created with plain Javascript and Pixi. 2. Peace Conference Direct Link Game Rules A 47 level logic puzzle based on the Four Color Theorem. You host an intergalactic Peace Conference. Its attended by psychotic politicians of four alien species of the Mars Attacks sort. Not unlike in a nursery your job is to assign every participant a place in the conference room and securing he does not freak out. Two types of rules must be fulfilled by your seating order: A chair rule states a pair of species which cannot be placed on neighboring chairs without raising hell. A table rule states species which must be placed on each table to achieve a pacifying effect in the room. In later levels you are assisted by staff of expertly skilled therapists (in martial arts ?) which can keep aliens in check even when chair rules are violated. Initial game was Android and a Java/C++ mix. Replaced the Java part with C++ and SDL and created the HTML5 version utilizing emscripten. You can mute the music in game options ("Silence"). For both puzzle games there are solutions available: Solutions
  23. Hi, i'm looking to get any solution form resizing the 'game' correctly in desktop and mobile screens but no way. I get the background image (sprite) non centralized and zoomed stage. Anyone can tell me please what's the wrong? CSS body { background-color: rgb(0, 0, 0); width: 100%; height: 100%; overflow: hidden; } #pixi-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } JS const logicalWidth = 1280 // window.innerWidth; const logicalHeight = 720 // window.innerHeight; // Init Application let app: PIXI.Application = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio, autoResize: true }); app.view.id = 'pixi-canvas'; // Add canvas to DOM document.body.appendChild(app.view); { ... } let background: PIXI.Sprite = PIXI.Sprite.fromImage("bg"); rootContainer.addChild(background); app.stage.addChild(background); { ... } this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); window.addEventListener('resize', () => { this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); }); private resizeHandler(stage: PIXI.Container, renderer: any, logicalHeight: number, logicalWidth: number) { const scaleFactor = Math.min( window.innerWidth / logicalWidth, window.innerHeight / logicalHeight ); let newWidth: number = Math.ceil(logicalWidth * scaleFactor); let newHeight: number = Math.ceil(logicalHeight * scaleFactor); console.log('size', {w: logicalWidth, h: logicalHeight, newW: newWidth, newH: newHeight, scaleFactor: scaleFactor}); renderer.resize(newWidth, newHeight); stage.scale.set(scaleFactor); }; RESULT
  24. Here I want to do a parabola of basketball。 I thought of using Pixi, but Pixi had no good built-in methods. Here is a demo I want to achieve:https://basketball.frvr.com/;He looks pretty good! How do I achieve this basketball track? And basketball has the feeling of radian.
  25. This is my code right now to check if left or right mouse button is down: // Left button down app.stage.on("mousedown", function() { // code... }); // Right button down app.stage.on("rightdown", function() { // code... }); But it doesn't seems to be possible that both events happen at the same time. How would I check if both mouse buttons are pressed? Left and right.