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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 245 results

  1. Hello guys, this is my first completed HTML5 game The idea is to tap the ball and dont let it fall, collect the stars to unlock all balls in the game Is very simple game, I hope you enjoy it for a while Game: http://www.cruzlutor.com/games/soccer21/ Game Play: https://www.youtube.com/watch?v=-kNc1IEnpD0&t=115s Feedback be appreciated Best!
  2. I would like to know if is possible to disable the multi texture batching in a PIXI V4 game. Recently i jus update my game PIXI lib from version 3 to 4.2. I`m using cocoon Canvas + . It seems perfect on iOS and android version greater than 5. In a old phone the texture batching is messing with the textures. Please. Is possible to disable it. I already tried PIXI["settings"].SPRITE_MAX_TEXTURES = 1; PIXI["settings"].SPRITE_BATCH_SIZE = 1024; without success
  3. Hello everyone, this is Crazy Racers. It's my first personal project [Play the Game] The game is an fast-pacing racing game. Features: 12 Different tracks 6 Different Cars (each car has it's own style) Different Obstacles 3 different game modes Leaderboard Game modes: Grand Prix: You race a number of tracks, the racer with more points win a trophy Quick Race: Race one track with 5 other opponents Time Trial: Race alone to try to get to the leaderboard Feedback are welcome, I hope you like this game Game is Available for Non-exclusive License and Re-skins, contact me for me details and for the full version of the game Cheers,
  4. Hi! I'm doing a thing in pixi (actually, in it's dart port (https://github.com/FedeOmoto/pixi) but that should be the same for the purpose of this question) and I'm using its text features (http://www.goodboydigital.com/text-updates/). I understand that before rendering a text, you set the style in which to render it, and that the style includes many different things like color, align and font... What I don't get is: where do the fonts come from? In the provided example, they used 'Arial' font and I know for sure that you can use 'Snippet' font as well. Is there any list of all available fonts I can choose from? And will these fonts work the on every machine?
  5. I am beginning with pixi.js and have read the appress book about it, i want to make a game where i have a character in the center of the screen and while he is running the camera will keep track of him but will change the view on the map, where eventually i will connect multiple players in the same map and draw them each frame, how do i do this with pixi?
  6. Hi ! I'm a beginner with both pixi.js and vue.js and I can't manage to import pixi.js in my components. I tried different ways : - Import pixi.js in index.html via the CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script> - Import pixi.js directly in my component (like in the example, it's working perfectly with TweenMax) import PIXI from 'pixi.js' import TweenMax from 'gsap' export default { name: 'home', mounted () { console.log('Mounted home, ready to PIXI') console.log(PIXI) } } The problem is that in my component, 'PIXI' is always undefined. Do you know if it's possible or if it's just me missing something. Thank you in advance.
  7. Hello people, I’m here to ask for assistance on PixiJs (more like a canvas related stuff) and IOS. I want to make an app than take all the available space of the webpage, kinda “Fullscreen” but not necessarily without the actions bar of the browser, What I was doing work pretty well on any browsers except in Safaris IOS browser, in landscape mode (sometime loading the page the first time in landscape work, then when changing orientation and coming back to landscape make the bugs appear). I can’t get to handle the IOS browser correctly, the canvas ignores one or both of the browser bar, causing it to appear under these bar. I just adapted quickly the Pixi’s “bunnymark” demo to show this problem. (http://davikingcode.com/dl-works/bunnyjs/ ). I found on the web an example working really fine on iOS landscape mode (http://www.goodboydigital.com/runpixierun/) but can’t see an obvious differences with my simple example. It may be an HTML/CSS problem, but I can’t find it exactly. Thanks for your help and have a nice day.
  8. Is there anyway to load textures in pixi synchronously? Something like: var texture = PIXI.Texture.fromImage("bunny.png", onComplete);function onComplete() { var bunny = new PIXI.Sprite(texture);}I tried the following: var img = new Image();img.onload = onComplete;img.src = 'bunny.png';function onComplete() { var texture = new PIXI.Texture(new PIXI.BaseTexture(img));}But the code above gives me an error. Please let me know how I can make pixi work synchronously. Thank you in advance. EDIT: I also tried: http://jsfiddle.net/8MawM/ but, it also gives me an error.
  9. Hello! My name is Dylan Jones, I work for a studio and we're looking for some contract help as our other developers are busy. We've created games like Battle Group in the past, and are working on a new multiplayer game. We currently have a contractor you might be working with, paid rates depend on speed and quality of work. Let me know if you or someone you know would be a good fit, server knowledge (currently using client authoritative firebase) is a must as we look at resumes (any work on .io genre games is a plus). I can provide more details on the code base (it's a working prototype with mostly clean states) but can not post it. You'll be working with talented folks, like Col Price, out artist for the game seen below: You can contact me on this thread or with Dylan-@-the-Dylan-Jones-.-com if you remove the dashes.
  10. I am trying to create a fragment shader via a PIXI.AbstractFilter to create a wave rippling effect to be applied to a background texture. I have already worked out the algorithm for the wave effect in JavaScript. What I am having difficulty doing is getting the data I need into the shader through PIXI. For my effect to work, I need to have a large Float32Array to keep track of wave heights and a texture containing the original, unaltered contents of the background image to read from in order to apply the effect of pixel displacement (light refraction). I've been doing a lot of searching and have come up with some partial solutions. I attempt to load my large Float32Array into the shader as a texture with type GL.FLOAT (with the OES_texture_float extension) and an internal format of GL.LUMINANCE and read from it. From what I can tell, my shader isn't receiving my data the way I need it to. Just as a test, I set gl_FragColor to read from my data texture, and instead of the solid black that should have appeared, it rendered a color from either the source texture or the texture of the sprite that the filter is applied to.If I weren't using PIXI, what I would try next is to use gl.getUniformLocation, but it takes the current program as its first parameter, and I don't know of a way to access that. The basic flow of my shader needs to go: Read From Array -> Calculate displacement based on value -> Render the current fragment as the color at x+displacement, y+displacement -> Get updated version of array This is my code in the constructor for my shader: ws.Shader = function(tex) { // GLSL Fragment Shader for Wave Rendering ws.gl = game.renderer.gl; ws.flExt = ws.gl.getExtension("OES_texture_float"); var unis = { dataTex: { type: "sampler2D", value: ws.gl.TEXTURE1 }, canvasTex: { type: "sampler2D", value: ws.gl.TEXTURE2 }, mapSize: { type: "2f", value: [ws.width+2,ws.height+2] }, dispFactor: { type: "1f", value: 20.0 }, lumFactor: { type: "1f", value: 0.35 } }; var fragSrc = [ "precision mediump float;", "varying vec2 vTextureCoord;", "varying vec4 vColor;", "uniform sampler2D uSampler;", "uniform sampler2D dataTex;", "uniform sampler2D canvasTex;", "uniform vec2 mapSize;", "uniform float dispFactor;", "uniform float lumFactor;", "void main(void) {", "vec2 imgSize = vec2(mapSize.x-2.0,mapSize.y-2.0);", "vec2 mapCoord = vec2((vTextureCoord.x*imgSize.x)+1.5,(vTextureCoord.y*imgSize.y)+1.5);", "float wave = texture2D(dataTex, mapCoord).r;", "float displace = wave*dispFactor;", "if (displace < 0.0) {", "displace = displace+1.0;", "}", "vec2 srcCoord = vec2((vTextureCoord.x*imgSize.x)+displace,(vTextureCoord.y*imgSize.y)+displace);", "if (srcCoord.x < 0.0) {", "srcCoord.x = 0.0;", "}", "else if (srcCoord.x > mapSize.x-2.0) {", "srcCoord.x = mapSize.x-2.0;", "}", "if (srcCoord.y < 0.0) {", "srcCoord.y = 0.0;", "}", "else if (srcCoord.y > mapSize.y-2.0) {", "srcCoord.y = mapSize.y-2.0;", "}", /*"srcCoord.x = srcCoord.x/imgSize.x;", "srcCoord.y = srcCoord.y/imgSize.y;",*/ "float lum = wave*lumFactor;", "if (lum > 40.0) { lum = 40.0; }", "else if (lum < -40.0) { lum = -40.0; }", "gl_FragColor = texture2D(canvasTex, vec2(0.0,0.0));", "gl_FragColor.r = gl_FragColor.r + lum;", "gl_FragColor.g = gl_FragColor.g + lum;", "gl_FragColor.b = gl_FragColor.b + lum;", "}"]; ws.shader = new PIXI.AbstractFilter(fragSrc, unis); // Send empty wave map to WebGL ws.activeWaveMap = new Float32Array((ws.width+2)*(ws.height+2)); ws.dataPointerGL = ws.gl.createTexture(); ws.gl.activeTexture(ws.gl.TEXTURE1); ws.gl.bindTexture(ws.gl.TEXTURE_2D, ws.dataPointerGL); // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE); ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.LUMINANCE, ws.width+2,ws.height+2,0, ws.gl.LUMINANCE, ws.gl.FLOAT, ws.activeWaveMap); // Send texture data from canvas to WebGL var canvasTex = ws.gl.createTexture(); ws.gl.activeTexture(ws.gl.TEXTURE2); ws.gl.bindTexture(ws.gl.TEXTURE_2D, canvasTex); // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE); ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.RGBA, ws.gl.RGBA, ws.gl.UNSIGNED_BYTE, tex.imageData); } I then attempt to update dataTex in the ws object's update loop: ws.activeWaveMap.set(ws.outgoingWaveMap); // WebGL Update ws.gl.activeTexture(ws.gl.TEXTURE1); ws.gl.bindTexture(ws.gl.TEXTURE_2D, ws.dataPointerGL); /* // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE);*/ ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.LUMINANCE, ws.width+2,ws.height+2,0, ws.gl.LUMINANCE, ws.gl.FLOAT, ws.activeWaveMap); I'm sure that plenty of this isn't right, but I believe that I can sort things out once I can get to the point where I can actually access my data. Can anyone point me in the right direction? This is central enough to my project that I am willing to discard PIXI altogether if there isn't a way to implement what I am trying to do. Also, I am using PIXI via Phaser, if that makes a difference. Thanks!
  11. Hi, guys, I want to write my own plugin to add support of neutrinoparticles.com (NP) to the PIXI. NP has support of Canvas as well as WebGL. Is it possible to easy write such plugin to support 3rd party code and what is short plan to write it (like main steps)? NP code just needs to pass position of the effect in the update() and context to the render(), so, it is pretty straightforward, to use it. But I'm not familiar with all details of PIXI architecture and JS is not my main profile, so I need short directions to start dig. Thanks.
  12. I can't for the life of me figure out how to work with enemy sprites that I've pooled into an array. I add them into the array by using .push() and take them out using .shift(), but once they're out and added to the stage, I have no way of selecting them, working with them, or giving them movement behaviors. Does anyone know how I can work with pooled sprites like this? Thanks.
  13. I need to have a single code for web and mobile client. I wrote something lie this: var renderer; var stage; window.onload = function() { var w = screen.width; var h = screen.height; stage = new PIXI.Container(); renderer = PIXI.autoDetectRenderer(w, h); document.body.appendChild(renderer.view); } In my desktop (FullHD screen) w = 1536, h = 864, window.devicePixelRatio = 1.25, but it work correctly. In my android device (HD screen) w = 360, h = 640, window.devicePixelRatio = 2. As seen stage has half the size of the actual screen size (720x1280), but stage children has real and correct size(for example image 60x60 realy has 60 pixels). In result my stage content does not fit on the screen. How to fix it? I need to scale all stage children into ratio? For example: stageChild.scale.x = stageChild.scale.y = 1 / window.devicePixelRatio ? Sorry for my English:-)
  14. down votefavorite I have previous experience with Unity, but I don't like the fact that Unity compiles your game directly into APK (or IOS equivalent). It's because I want to modify the game to provide chat interface (and some other stuff) for multiplayer mode etc. So, I thot of doing it the other way - 'create an app and embed a multiplayer game within it'. Now, again this approach meant that I had to develop for android and ios seperately. But, then I came across React-Native library (mobile extension of popular React framework). Now, I have decided to create an app using React-Native (cross-platform), but now I am confused as to which game engine should I use and I think since React-Native is javascript, game engine needs to be in javascript for seamless integration. I am planning to use to embed the game in my react-native app. Can anyone suggest me any good javascript game engines that can be used along with react-native? I have done some research on Phaser and Pixi but they use WebGL for rendering and I read somewhere that doesn't have great support for WébGL or Canvas(Am I wrong?). Any help is highly appreciated
  15. Hi there, for some low performance devices, phaser's webgl renderer doesn't work, but when I try pixi V3, it goes well, so I am wondering is there any chance to use PIXI V3 renderer in Phaser?
  16. Hey everyone, first post here! I'm putting together a little web GUI using Angular2 and pixi, and I'm looking for a way to have the pixi canvas automatically resize to be inline with its parent element (in this case it's an angular2 component). Below is the angular component that creates the pixi canvas and places it into the DOM. You can see that right now its size is being set to a fixed 256, 256 by the stub methods I created. What I want is the canvas to automatically fill all of the available space of it's parent container when it loads, and also resizes responsively with different resolutions, etc. Similar to the behaviour of the CSS { height: 100%, width 100% } @Component({ selector: 'pixi-component', templateUrl: './pixi-component.component.html', styleUrls: ['./pixi-component.component.css'] }) export class PixiComponentComponent implements OnInit { constructor() { } ngOnInit() { this.generatePixiCanvas(); } generatePixiCanvas() { //Create the canvas and add it the DOM... var renderer = PIXI.autoDetectRenderer(this.getParentDivHeight(), this.getParentDivWidth()); document.getElementById('pixi-component').appendChild(renderer.view); //Create a container object called the `stage` and render it... var stage = new PIXI.Container(); renderer.render(stage); } getParentDivHeight() { return 256; } getParentDivWidth() { return 256; } } Heres a snippet of the HTML in case you want to see it: <div id="canvas-pane" class="flex-item flex-container flex-container-vertical"> <div id="canvas-pane-header" class="flex-item"> <div id="canvas-pane-header-title"> </div> </div> <div id="canvas" class="flex-item"> <pixi-component id="pixi-component"></pixi-component> </div> </div> How can I achieve this goal?
  17. Hello everyone! Is there Grey filter in the latest version of pixi.js? I found these only: http://pixijs.github.io/pixi-filters/examples/
  18. var name_text = new PIXI.Text(name); name_text.style.font = "bold 10px arial"; name_text.style.align = "center"; this.imageContainer.addChild(name_text); How do I change the color ! aaa
  19. Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( https://github.com/tweenjs/tween.js/ ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.
  20. Hi all, I'm using Phaser and I came across a glitch which is, I think, due to a bug in the PIXI.TilingSprite.protototype._renderCanvas() method. The bug might be linked to a bad restore of the context. In my game, once I introduced tiling sprites, everything started to "slide". So I assumed that adding tiling sprites to the game introduced the "sliding" effect in the context. To prove me right I logged "context.currentTransform" at the start and end of the TilingSprite._renderCanvas() method, and I came across that result : Start of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0} End of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -1255, f: -822} So as you can see the e and f parameters are different. If I do a context.save() at the start of the method and a context.restore() at the end, everything works perfectly. Same goes if I hardcode context.setTransform(1, 0, 0, 1, 0, 0); If it helps reproduce the bug, here are the values I have in the method : wt = {a: 1, b: 0, c: 0, d: 1, tx: -1255, ty: -822, type: 24} resolution = 1 tx = -1255 ty = -822 tilePosition = {type: 25, x: 219, y: 0} tileScale = {type: 25, x: 1, y: 1} tilePosition.x = 219 tilePosition.y = 0 this._width = 4200 this._height = 2400 I'm not a Pixi expert (first post in this section!), nor in canvas/context, so I'm sorry for any mistake. Also I hope this has not been flagged already! Thanks guys!
  21. Hi, I'm trying to do a custom build of the pixi lib to optimize the filesize of the lib in a project. But for some reason it keeps on building the full lib (all modules), even though I have the -e or --exclude parameters added. This is what I did so far (following the instructions on the Pixi Github page): * downloading and unzipping the full pixi zip file (v4.2.2) * in the root of the pixi folder: npm install (creating node modules folder) * in the root of the pixi folder: npm run build -- -e extras -e interaction -e filters (also tried: npm run build -- --exclude extras --exclude interaction --exclude filters) For some reason this keeps on building the full pixi and minimize pixi files in the dist-folder, so it didn't exclude the modules mentioned. I am trying to debug this at the moment, but I'm not very familiar with npm and so far I'm a little in the dark. I upgraded nodeJs to version 6.9.1 some days ago, so that should be ok. Am I missing something here?
  22. Hello everybody! There is my fragment shader for PIXI.Filter. I'm using it to change the colour of the area drawed by PIXI's primitives (eg. for gradient effect). All looks good on renderer.resolution = 1 but if i set it into 2 It draws additional line out of the area, and strange big pixels on a complex forms like chart (see screenshots). Help me please :-) precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform mat3 mappedMatrix; uniform vec4 topColor; uniform vec4 bottomColor; uniform float alpha; void main(void) { vec4 result = texture2D(uSampler, vTextureCoord); vec3 mapCoord = vec3(vTextureCoord, 1.0) * mappedMatrix; if(result.a > 0.0) { vec4 mixCol = mix(topColor, bottomColor, mapCoord.y); vec4 fg = texture2D(uSampler, vTextureCoord.xy); gl_FragColor = vec4(1.0, 0.0, 0.0, alpha); // gl_FragColor = mix(fg, mixCol, alpha); // Gradient effect disabled. When pixels are red - it's better to see the bug } else { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); } } Unwanted line out of the area (resolution = 2) Normal result (resolution = 1) Strange big pixels (resolution = 2)
  23. I am working for a Wearable Computing and Augmented Reality Startup in Bremen, Germany: http://www.ubimax.de For improvements of our (PIXI.js powered) Web-Editor that configures our Augmented Reality solutions we are looking for a Web Application Developer (m/f) to join our team in Bremen (job permit for the EU is required). It says full-time in the job description but students looking for an internship are also very welcome! We are a team of people from all over the globe, so everyone in our team speaks English fluently but German is a big plus. The Job description (in German) is attached to this post. Please apply with your full resume including school and other certificates as well as code examples (e.g. github links) and references to career@ubimax.de . Feel free to ask me for further details on the job. 162810_Ubimax_Stellenauschreibung_WebApplicationDeveloper.pdf
  24. Hello. I started learning pixi a week ago. I easily managed to create sprites, but couldn't set up event handlers. Now I think that the problem is in latest release of pixi. Example: http://pixijs.github.io/examples/index.html?v=v4.0.3#/demos/interactivity.js - sprites are clickable http://pixijs.github.io/examples/index.html?v=v4.1.0#/demos/interactivity.js - only 'mouseover' events are working Should I switch to previous version, or set up handlers differently?
  25. I know that I need to use .buttonMode = true and .defaultCursor = "inherit", but I want to change the cursor to an image (like in CSS). defaultCursor = "url(http://www.image.com/jpeg.png)" doesn't seem to be working. How can i achieve this?