Search the Community

Showing results for tags 'pixi'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 267 results

  1. I try to use `containsPoint`, but it always return false. It seems `containsPoint` must work with `startFill & endFill`, but when I use `bezierCurveTo` draw line, the fill not working. But the canvas original function `isPointInPath` is working. Why? Here is my demo:
  2. Hi When i load my textures with the loader and add this to the stage it's not showing. But when i create a texture with PIXI.Texture then works perfectly. I load in the game.js file the main-scene.js, in the main-scene.js i add some sprites when i create the texture in the mainscene it works fine but when i use the resources from the loader i get no error but the sprite is not displayed. What i'm doing wrong? Thank you game.js import * as Pixi from 'pixi.js' import MainScene from './scenes/main-scene/main-scene' export default class Game extends Pixi.Application { constructor (vueContext, config) { super() // Contexts this.vue = vueContext this.config = config // Add Game view to site this.vue.$el.appendChild(this.view) // Scenes this.scenes = {} // Main Scene this.scenes.mainScene = new MainScene(this, this.vue, this.config) this.stage.addChild(this.scenes.mainScene) this.load() } load () { this.loader.add('sprite2', '/static/game/images/sprite2.png') this.loader.load(this.setup()) } setup () { // Setup Scenes this.scenes.mainScene.setup(this.loader.resources) } run () { } destroy () { } } main-scene.js import * as Pixi from 'pixi.js' import Scene from './../../engine/scene' export default class MainScene extends Scene { constructor (context, vueContext, config) { super() // Set Contexts = context this.vue = vueContext this.config = config } setup (resources) { // This is wokring let Texture = Pixi.Texture.fromImage('/static/game/images/sprite1.png') let sprite1 = new Pixi.Sprite(Texture) this.addChild(sprite1) // This is not working let sprite2 = new Pixi.Sprite(resources.sprite2.texture) this.addChild(sprite2) } }
  3. Hey there! Catacomb Chaos is an endless action arcade game where you try to survive against unrelenting waves of skeletons. You can loot gold and purchase potions for your next life. Let me know what you think! Play here: I learned some neat stuff making this. Engine design, ECS, and steering behaviors are some of the cooler things I experimented with for the making of this game.
  4. I am trying to load texture atlas dynamically. The load happens when the user clicks on canvas. At the same time an animation fires. The next time the user clicks on canvas, previously loaded animation runs. Perhaps it is best to demonstrate the problem. I uploaded the files on a test server. You can see the delay here: I hardcoded the first animation load, meaning that you will see a delay on second canvas click. Run this code on a low end mobile device, and you will se a huge delay. I am getting a 4s delay on a motorola G and 0.5s on an iphone 5. What can I do solve this annoying issue? you can inspect the code on a website, but I will also paste it here: $(function(){ var current; var next; var canRunNext = false; var isAnimating = false; var firstRun = true; var container = document.getElementById("canvas-container"); var app = new PIXI.Application(550,584,{transparent:true}); var canvas = container.appendChild(app.view); setupCanvas(); loadRotationsAndCurrent(); var infiniteLoader = PIXI.loader; function setupCanvas(){ $(canvas).attr("id","canvas"); if (window.screen.width < 600){ $(canvas).css("width","100%"); $(canvas).css("height","100%"); $("#canvas-container").css("width","100%"); }else{ $("#canvas-container").css("width","50%"); } } function loadRotationsAndCurrent(){ PIXI.loader .add(['jimages/1s.png.json']) // load all rotations .load(onRotationsLoaded); } function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); next.visible=false; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); next.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(next); // app.renderer.bindTexture(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); canRunNext=true; console.log("next loaded"); }); } } function setupFrames(name){ var frames = []; for (var i = 0; i < 30; i++) { var val = i < 10 ? '0' + i : i; // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame(name + val + '.png')); } return frames; } function onRotationsLoaded(){ // all rotations loaded current = new PIXI.extras.AnimatedSprite(setupFrames("1_000")); current.x = app.renderer.width / 2; current.y = app.renderer.height / 2; current.anchor.set(0.5); current.loop=false; current.animationSpeed = 0.5; current.visible = true; isAnimating = false; current.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(current); } var run = true; $("#canvas").on("click touch touchstart",function(){ if (firstRun && !isAnimating){ loadNext(); isAnimating=true; current.gotoAndPlay(0); console.log("first run"); firstRun=false; }else{ if (canRunNext && !isAnimating){ isAnimating=true; next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); });
  5. I have this simple jsfiddle that displays the problem that I'm trying to solve. It looks like the render texture get's cropped based on the position of the object passed to the renderTexture.render function. Is there a way around this?
  6. Hi, I'm running into an issue regarding collision detection against adjacent DisplayObjects. Let's say I have sibling objects that are a child of a Container that has been rotated. If I use getBounds() on the siblings they return a bounding box that is oriented to cardinal north. Using those bounds for collision detection may result in false positives, because the given bounds may not follow the actual shape and orientation of the DisplayObject. I created a codepen to illustrate the point: When you toggle the "rotate" buttons at the bottom of the pen you will see the purple box morphing to the shape of the bounds for "shape" and "label". The text will change from red to green if the collision detection returns positive. I would like to do a more robust collision detection algorithm (possibly based on Separating Axis Theorem), but I would need to grab the vertices for each shape correctly translated to the global coordinates regardless of their nesting within the scene graph (accounting for scale, rotation, and translation from the shape and all parent transforms). The case being that the collision detection that I would like to do may not be only between direct siblings within the scene graph. Is there a nested property that would give me what I'm looking for, or will I need to grab the graphics data and apply all of the recursive parent transforms myself for each vertex? Here is a fork of a codepen that demonstrates the Separating Axis Theorem:
  7. Hi Just starting with pixi (and canvas). Looking to create something similar to this ribbon effect on mobile Any advise, can this be done? any tutorials available? lack of experience in this means i'm struggling to break it down into smaller tasks, any advice. Thanks
  8. Hi I'm creating a animated banner using pixi for a website. Then banner will be 100% width and 100% viewport height. I have set the size of the renderer to window.innerwidth and window.innerHeight. Now when i add my animation image with mesh texture and shading, what is the best way to center it within renderer? Hopefully if the answer i get is based on percentages this shoudl also make it repsonsive. Thanks
  9. var name_text = new PIXI.Text(name); = "bold 10px arial"; = "center"; this.imageContainer.addChild(name_text); How do I change the color ! aaa
  10. Hello, I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default. There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  11. Hi, I have a question about the resolution in PIXI.js: If I create a PIXI.Graphic object (for example a rectangle) with the size 50 pixels by 50 pixels, this rectangle will be the same size on my desktop machine (devicePixelRatio 1) as a 50 pixel by 50 pixel div element. When I look at the same page with an iPad Air 2 (devicePixelRatio 2), the rectangle drawn with PIXI is twice the size of the div element. In my opinion, on the iPad, both elements should be equally large, right? I have created a CodePen: Thanks for your support!
  12. Sometines I have TypeError: Failed to execute 'attachShader' on 'WebGLRenderingContext': parameter 2 is not of type 'WebGLShader' in pixi.js: 3936 (Ver 4.0.0). This appears few times in a week and I have no idea when and why. Same things can 100 times work and once not. Why this error appears at all and how can I fix or prevent this?
  13. Hi everyone! I have several Pixi.Text objects floating in my Pixi container. var style = { font:"22px Verdana", fill:getRandomColor() }; var text = new PIXI.Text("My text", style); text.anchor.set(0.5, 0.5); text.dx = 0.1; text.dy = 0.1; Each Text object is rotating from -90 degrees to + 90 degrees. When collision happens with Text object and container, Text acts like a ping-pong ball changing its direction. Currently I'm using this code to check if text object is < or > of my pixi container width: if(text.x < 0 || text.x > $("#pixi-container").width()) text.dx = -text.dx; if(text.y < 0 || text.y > $("#pixi-container").height()) text.dy = -text.dy; text.x += text.dx; text.y += text.dy; Collision happens when a center of text object reaches container border. I need collision detection when ends of text object touches the container border.
  14. Hello guys, I need you help. Do you know how to do a ribbon animation on PIXI.js? B I saw a lot of example on CSS3, but no example on pixi. Maybe I search in a wrong way. But I need 2D version, not a 3D Thank you for any feedback
  15. 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
  16. var sprites = {};var loader = PIXI.loader.add('cloudstars',"imgs/cloudstars.jpg").load(function (loader, resources){ sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); }).add('star1',"imgs/star1.png").load(function (loader, resources){ sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); }).add('star2',"imgs/star2.png").load(function (loader, resources){ sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); }).add('star3',"imgs/star3.png").load(function (loader, resources){ sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); }).add('star4',"imgs/star4.png").load(function (loader, resources){ sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); }).add('ship',"imgs/ship_blue.png").load(function (loader, resources){ sprites.ship = new PIXI.Sprite(resources.ship.texture); }).add('shield_straight',"imgs/shield_straight.png").load(function (loader, resources){ sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); }).add('shield_edge',"imgs/shield_edge.png").load(function (loader, resources){ sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); }).add('title_ship',"imgs/title_ship.png").load(function (loader, resources){ sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); }).once('complete',function(){ var ready = setTimeout(accountSetup,3000); }).load() This seams to work but I figure it's not the correct way to do this as I kinda guessed my way through some of it. Will this cause a problem if I use this method to load all of my sprites into a standard javascript array for use later on? Talking about maybe 100 sprites including some tiling sprites for backgrounds. Also do I really need to use the "loader" in "function(loader, resources)" part? I don't seem to use it inside the function.
  17. Hello everyone, Recently i finished my first medium-sized HTML5 game - Medieval Defense Z. I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't. This is more like review/tutorial type of thing, so hopefully someone will find something useful. • Goals: • 60fps. • Smooth gameplay and animations. • Quality comparable to flash games. • Tools: • Language: Haxe. Strictly typed programming language, similar to ActionScript 3.0. Compiles to all major languages, including javascript. • Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried. • Debugging: Chrome. Has console, debugger and profiler. • Rendering library: Pixi.js. Uses display list concept like flash. Works well. • Sound library: Howler. Good enough, the id system is a bit weird though. • Bitmap font exporter: Free and web-based. • Sprite Sheet Packer: Freeware and very simple. • Graphics: • Scaling will look ugly if you use many small png files for textures. • If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too). • Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation. • To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio. • Sounds: • Library: Howler. • Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count). • ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup. • I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit). • iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen. • Mouse Events: • Used pixi.js API to open links. • iOS Safari: under "touchstart" event won't open links in new tabs, use "tap" event instead. • sprite.on("mousedown", callback) for desktop. • sprite.on("tap", callback) for mobile. • Performance: • Reuse frequently used sprites. • Avoid creating too many objects every frame. • I would recommend looking up data-oriented programming to get more juice out of Javascript. • Record timeline with Chrome profiler to find performance bottlenecks. • Masks are slow. Use trim if you only need a simple cut. • Game Debugging: • Simple CSS + DOM side menu. • Basic field view/edit. • Simple buttons with callbacks. • How to debug html5 game on android (mobile) with desktop chrome (PC): 1. Upload game to your website. 2. Go to (desktop) chrome: chrome://inspect 3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development). 4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed). 5. To quit debugging enter: adb kill-server • Conclusions: • Programming in Haxe instead of pure Javascript probably saved hours and hours of debugging. • Pixi.js is great, but i wouldn't recommend doing very complex scenes. • Would have liked more automated solution for spritesheet and sound stuff. • Poor performance bites sooner or later, so be prepared to do extensive profiling. • Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame. • Overall i am happy with the results, however it took longer than expected to make this game. Any feedback is appreciated. The game is not yet released, but here is gif trailer:
  18. Hello. I am trying to build a sort of "Line of sight" shader. I have the a tilemap which is just a Sprite sitting inside of a container. Then I am generating another texture dynamically which represents the "light" data. I want to create a fragment shader to show/hide parts of this tilemap based on the light texture/ I am able to pass this texture into the shader, however I am seeing a problem that I think may be intended behavior, but I'm trying to figure out how to achieve my desired result. The problem is it seems the fragment shader is operating on the screen rather than the underlying pixels in my Container. The container is scaled/translated so I have no way to know which true (non translated/scaled) pixel I am operating on within the shader (vTextureCoord seems to give me coordinates relative to the screen ?). Whereas the lightmap texture I am passing in does not have this same problem. This is my first time playing around with pixi.js filters. Any suggestions ?
  19. Hey guys, just a really quick question on containers. I see that you can use a PIXI.particles.ParticleContainer. In the documentation is says that it doesn't support features such as tinting, alpha, masking etc.. However, as this class is extending from the normal Container, I am curious as to what is different, and how it achieves this. Thanks, Nick
  20. Hi all, i'm facing with this problem on some chrome browser (updated), can some one suggest where i must check the error? I use typescript with webpack. Can some one tell me how to figure out this error? The code work well also in internet explorer!!! The problem is only on chrome windows. This is my webpack configuration: var path = require('path'); var webpack = require('webpack'); var phaserModule = path.join(__dirname, '/node_modules/phaser/'); var phaser = path.join(phaserModule, 'build/custom/phaser-split.js'), pixi = path.join(phaserModule, 'build/custom/pixi.js'), p2 = path.join(phaserModule, 'build/custom/p2.js'); const { CheckerPlugin } = require('awesome-typescript-loader') var definePlugin = new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')) }) module.exports = { entry: { app: [ //'babel-polyfill', path.resolve(__dirname, 'app/index.ts') ], vendor: ['pixi', 'p2', 'phaser'] }, watch: true, devtool: 'cheap-source-map', output: { pathinfo: true, path: path.resolve(__dirname, 'dist'), publicPath: './dist/', filename: '[name].js' }, module: { rules: [{ test: /\.ts(x?)$/, exclude: /node_modules/, loader: "awesome-typescript-loader" //loader: "babel-loader?presets[]=es2015!awesome-typescript-loader" }, { test: /\.css$/, loader: 'css-loader' }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }, { test: /phaser-split\.js$/, use: ['expose-loader?phaser'] }, { test: /p2\.js/, use: ['expose-loader?p2'] } ] }, plugins: [ new CheckerPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }), ], resolve: { alias: { 'phaser': phaser, 'pixi': pixi, 'p2': p2 }, extensions: [".tsx", ".ts", ".js", ".jsx"] } };
  21. Hello, I'm working on PixiJS application where I dressing up my character. So, different PNG images are loaded to Pixi stage. There is a button to finish dressing character and it saves current canvas to gallery using .toDataURL() method. The problem is that during image changing the user can click finish button to save canvas to gallery, but the image is not already loaded in browser, so it result in missing image in canvas data. The example of adding hair image to stage: function dressUpCharacter(callback) { hair_texture = PIXI.Texture.fromImage(hair_img); hair = new PIXI.Sprite(hair_texture); stage.addChild(hair); if (callback && typeof(callback) === "function") { callback(); // callback -> unlock finish button } } As You can see, I already made callback to unlock finish button when my dressing function finishes. The thing is that javascript code completes successfully and adds canvas image to stage, but the image needs few seconds/miliseconds (depending on internet speed) to load in browser. During that time if user clicks finish button it can result with incomplete canvas. Is there any way I can detect canvas images are fully loaded? I saw that PIXI has loader with loader.once('complete', callback) method, but I don't know how to use it. Many thanks in advanced! Josip
  22. Hi all! I have a weird problem, and I don't know how to solve it. What I wanted to make: when I click over a circle, it has to get GlowFilter (or OutlineFilter it doesn't matter but it should be from pixi-extra-filters ( and has to be larger with TweenLite. What I've got: all is good, but while the circle is scaling glowing is broken. I don't know how to explain this in English, but I prepered an example on JSFiddle - Just click over the circle and it will be scaled. All is good. After, click again, it will be usual size. And click one more time and it will something like that (I've attached image). What's wrong? Why it creates those weird lines? P.S. The problem is appeared after second+ click only, but it is actually for this little example only, because there is the same problem is appeared for the first click in my project.
  23. I've used the pixi-compressed-textures.js and can get Spine to load the lower resolution artwork, but I still can't seem to find an exact piece of code for how to rescale the animation at runtime, rather than via redoing the whole thing in Spine. I know this should be an easy fix - anybody have the 1 liner I'm looking for here? I'm developing a visual reading app for autistic children, and Spine has proven to be a pretty easy way to get basic animations up and running fast! I'd really appreciate any advice, as I'm a noob to both Pixi and Spine, while having pretty good experience in JS and AS3.
  24. I'm looking for right way to manage my assets that for device with hd screen used default atlases, but for device with full hd screen or retina used 2x size atlases.
  25. 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