HI!
which boot loader should I use to boot now?
↧
Loader Json
↧
Making a balloon physics
Hello guys,
Need some help with creating a custom animation (currently using Tween.js, you can suggest any) that reproduces balloon physics, exactly like in the video (https://youtu.be/6ZJjCIiq-Yg?t=78). Watch please in 0.25x speed in order to deeply understand its behavior.
Is it possible to make such an animation with only one sprite(one png image of a balloon, don't consider a bird inside right now) or should it be done via changing textures overtime (i.e. condition, when "top" point of texture "touches" top of container)?
If it's possible, can you please suggest solution or any literature (video, text, whatever) which can help me with my case?
Thanks!
↧
↧
[help] Problems rendering sprites
Hi everyone,
I have recently started to play around with pixiJS but I'm getting some issues and I do not understand why they are happening.
If anyone with more experience would be able to help with one or more of the problem I would really appreciate it.
Here is the code so you can have a look and modify to see the problems: https://jsfiddle.net/palanolho/1Ltu9rmd/
I have added comments like "// ===== PROBLEM 1 =====" to highlight where i'm having the problem
Just to give you some context, I'm playing around and trying to build a slot machine game and my code is based on the example provided on pixiJS page (https://pixijs.io/examples/#/demos/slots-demo.js)
Problem 1
You will see that I have a function called initializeSymbolTextures() which I call immediately before doing anything in the init(). The only thing this function does is to generate sprites based on the images I loaded with the "pixi loader". Before, I was doing that just below the var slot_symbols_sprites = new Array(); (outside the function) but for some reason, it looked like if the sprites were not available and nothing was being rendered. If I define these sprites directly inside the init() also works.
Does anyone have any idea why this happens?
Problem 2
this problem is actually multiple but I think that they may be all correlated (somehow)
Issue 1
On the line I highlighted the problem "s_sprite = slot_symbols_sprites[i+1];" you will see that I'm using i+1 to define the index of the sprite to be displayed (and that generates the output you can see). If I change it to j+1 nothing is rendered, but I checked and the code seems to get the correct value and sprite.
Any ideas?
Issue 2
looking at the code you will notice that it should be drawing 5 columns each one with 4 rows, however, as you can see, it's only drawing the last row (for some reason).
If you comment the line "s_sprite = slot_symbols_sprites[i+1];" (which is actually what I intend to do but was trying to figure out the issue) you will notice that the grid is randomly drawn. If you run it multiple times you will see that every time he draws randomly and you will see that he actually populates symbols on all rows and columns but with lots of blank spaces, and the reels_config doesn't contain any blank spaces (nor "-" which corresponds to blank symbols).
Any ideas?
Problem 3
Note: To see this problem, please uncomment the code bellow "// ===== PROBLEM 3 =====" and also the 2 lines after "app.stage.addChild(reelContainer);"
By the code, I was expecting the engine to render the reelsContains (with the slot symbols) then the test_container (I create just above) and then the background (that I also create just above). However, what is happening is that it only renders the test_container and if I comment the code that creates the test_container and background, only the reelsContains is rendered, and the background doesn't render in any way at all.
Any ideas?
Many thanks in advance to anyone that is willing to provide some help
- Miguel
↧
generateTexture with region doesn't work?
Hello,
I am trying to take a screenshot of a specific part of my stage by using this simple code:
var ht = app.renderer.generateTexture(app.stage, 1, 1, new PIXI.Rectangle(1200, 400, 370, 310)); // the stage dimensions are 1600x900
var hp = new PIXI.Sprite(ht);
app.stage.addChild(hp);
whatever the rectangle x/y values, the texture is always grabbed from 0/0
second 'problem' is that I have to use canvas renderer to make this work or I get a blank texture which is pretty weird because with other display objects (even objects already added to the stage) the texture is there!
The renderer issue is not a big deal, I can use a custom renderer, the problem is that I can't crop a portion of my stage.
Am I missing something? Or maybe there is another way to achieve what I need?
Thanks!
[Edit] I can do it by generating a full screen stage and then create a new Texture with the frame I want, but the question is still valid; I found a bug or I did it wrong? And what about the webgl renderer blank grab?
↧
Best way to pause a custom filter?
Hi I was wondering if there was a way to temporarily pause a custom filter from executing shader code? I'm thinking if setting sprite.visible = false should do the trick, not sure. Or should I pass a uniform to not execute calculation or is this even a concern? Thanks!
↧
↧
Erasing a picture
HI! I'm only learning PIXI, help is needed. How to implement a similar effect (erasing a picture), as an example https://grnch-net.github.io/. I have two pictures, on each other, I want to gradually erase the top picture with the cursor to see the bottom one.
↧
[help] Slot game - How to spin the reels
HI everyone,
I'm trying to learn a bit more about pixiJS and for that, I'm trying to build a slot game.
I was looking at the example available in the PixiJS website (https://pixijs.io/examples/#/demos/slots-demo.js) and I get most of it and was able to build my own with some tweaks. But now I'm on the part where I actually need to animate the reels (to make them spin) but I'm not understanding the method/approach taken in that example so, I was hoping to understand first how it can be done and how I can do it.
(please see the attack for an example of what I have)
My first thought would be to make something simple (no need for fancy effects. That can come later).
- I have an array with all the sprites in the reel ordered in the same way as they should be displayed/rendered. And I have a container that inside has 5 containers (one for each reel) and it has the first 4 symbols drawn
- The slot will only occupy part of the screen (the white rectangle), and that means that, somehow, I need to define some "clipping" area so that the reels can spin behind it through the hidden area (?!)
- somehow I need to make the reels circular. This means that when the last symbol moves into the visible section, somehow the other end of the reels should come immediately after.
- I would like to try to make the reels accelerate the spin up to some points and then deaccelerate until it stops on the new position
Do you think this is a simple (or the simplest) approach?
- How can I do this clipping (so that the symbols that go under it get out of view)? or is there a better/easier way to do it?
- how can I make the reels spin making them "circular"?
- is there an easier way to handle the acceleration and deaccelerate of the reels (o have read some things about tweening but It's a new concept for me and I'm not understanding it very well...)
Many thanks in advance for any help you could provide
- Miguel
↧
How to smooth out the line of the figure
Hi, guys. I created the rounded rectangle and imposed 2 filters (GlowFilter, OutlineFilter). You can see code below:
var new PIXIfiltersGlowFilter30; outerStrength 0; innerStrength 5; color 0xc2dac2; quality 1; // filters , new PIXIfiltersOutlineFilter1, 0x8c8e8d, 1;
How to smooth out the line on rounded edges?
If I use lineStyle instead OutlineFilter, the line is smooth, but GlowFilter doesn't work correct.
↧
How to handle WebGL poor performance
I published a good dozen apps based on pixi, those apps do handle automatically their fps and resolution based on overall performance so they adjust themselves to the performance of the device. The system also handle just fine when the browser doesn't have any webgl available.
Now this being said, there are browsers that do have webgl but apparently a very weak version where all webgl operations are slow and fairly limited in what it can handle, it that case my apps run at very low fps and even eventually crash the browser after a few minutes. My question is, what is the best way to handle this?
I would rather detect those problems at the start and then either try a graphic2d solution or just not display the app and ask the user to choose a different browser but what should I be looking for in the webgl implementation to decide this? Should I start by timing webgl operations and take a decision if those operations are too slow? Or should I look for specific parameters in webgl that would tell me already this is gonna be too slow? What is a good clue(s) in webgl parameters that this webgl version is gonna be awful?
Is there some additional tips with webgl pixi besides fps handling and resolution handling that could get some extra fps even in those situations?
Anyway thanks for any insights.
↧
↧
Mask with blur
Hello!
I have to make blur of the half of the screen (see photo).
1. I created my shape (via canvas or Pixi, it doesn't matter) and named it "shape".
2. I created Rect that covers the half of the screen:
overlay.drawRect(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
3. I applied blur filter for this Rect:
let filter = new PIXI.filters.BlurFilter(); overlay.filters = [filter];
4. Then I mask it with my "shape":
overlay.mask = shape;
But nothing is happens. What I have done wrong?
The main question is -- can I do it using PIXI? What is the best way to do it?
I'm new in PIXI and I have already tried maybe everything, but haven't got what I needed.
Please, help me :)
↧
Mouse: Intelligent Focus Helper [GSAP]
Hello.
I tried to get a kind of focus helper with the mouse when the pointer rolls over an item.
but i can get a good easing when the mouse are hover a element.
I do not know if I explain myself well, but I will try.
i use the pointerLock API.
when the mouse icon get hover a new elements, i want to help the mouse to move to center of element.
But without disturbing the control of the mouse.
the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines.
i try my best to make a codepen.
for active the pointer lock, just click inside the blue square.
https://codepen.io/djmisterjon/pen/gzJVRR/?editors=1011
if your move the mouse,
your will see that the behavior is a little messy when the mouse flies over a white square.
An idea on a good approach to create a similar system?
Am using GSAP libs.
thank a lot for help.
↧
PIXI 4 - simultaneous mouse buttons
Hello, I have found another problem after upgrade from PIXI2 to PIXI4
This time it is about mouse interaction, it seems like that I cannot handle both buttons held simultaneously as it worked with PIXI2
I am using right button (with mousemove) to navigate character on the map while left button (with mousemove) is used to move map and it is really usefull to use it both at once.
Simply put ..
window.stage.mousedown = function(event) {
log("LEFT DOWN");
};
window.stage.rightdown = function(event) {
log("RIGHT DOWN");
};
If I am HOLDING left button and click with right - no event is fired
If I am HOLDING right button and click with left - no event is fired
Same problem - and probably even worse - is when I am moving (holding right button down), then I cannot interact with another objects at the same time (because left button doesnt fire any event).
I have tried pointerdown instead of mousedown, but then right button fired both events which is also wrong.
This is really big issue if that possibility is removed in PIXI4 
Someone faced that problem ? Thanx in advance 
↧
[help] How Tweening work
Hi everyone.
I'm currently trying to learn more about PixiJS ao I'm building a 5 reels x 4 rows slot machine.
At the moment I'm working on making the reels spin and stop on a predefined index.
As an overview, I have an array for each reel and when rendering the reels I always have 4 symbols visible from each reel and an additional one outside the clipping area. (so that the symbols spin only in a specific area and not the full canvas).
They I move each symbol down "X" pixels and once the lowest symbol is out of the clipping area, I add the next symbol to the top of the reel. and this will give the effect of an ever spinning reel.
Now I want to handle the "stopping" but some people around the form mentioned that I should be using tweening in order to move the symbols instead of moving them a fixed amount of px.
Since I don't understand (yet) the concept of the tweening and how it could be used in my case, I was wondering if anyone would be able to explain how tweening works and how do you think I could use it in my case (I'm thinking in using this library https://www.createjs.com/tweenjs that seems good and "simple, but if you think there are better ones, please let me know).
Basically, the animation of the reels that I want to try to implement is the following:
- Start spinning all reels at the same time
- each reel should make a full pass through all symbols of the reel
- after a full pass, the reel should stop on a given index (calculated when the reels started spinning)
- the "stopping symbol" should stop on the first visible position of the reel (in this case will correspond to position 0,0 of the contains that contains the reel symbols)
Is anyone able to give me some insight how tween and how to use it in my case?
Many thanks in advance for any help you can provide,
- Miguel
↧
↧
How do do right click on a Container
Hey folks, first post etc.
I'm trying to make a minesweeper clone, and I want to be able to right click on a tile sprite to 'flag' it, but I can't figure out how to make a right click trigger an actual click event instead of opening the context menu. I tried adding a custom `contextmenu` handler to the canvas itself to prevent the context menu from opening, but that stiff didn't trigger a click event, as https://github.com/pixijs/pixi.js/issues/36 makes me think it should. The handler I used was this:
function contextmenu_handler(event) {
console.log('right click!');
return false;
}
very simple, and that did intercept the right click (no context menu opened), but as I said, no mouseup or mousedown event on the Container object.
I tried googling a bit to find a solution, but I couldn't find anything relevant, aside from the issue I linked earlier. Is this just not something I can do with pixi (or in a web-based game)? Or am I missing something?
↧
Not work PIXI.RenderTexture
Why not work on my laptop PIXI.RenderTexture, on another computer, the code works fine.
Quotehttps://pixijs.io/examples/#/demos/mask-render-texture.js
The example also does not work on my laptop.
↧
"Inventory slots" and re-arrange items between slots
Hi everyone,
I'm trying to implement something similar to an items inventory and equipment slots, where you drag the items from the inventory into the slots and also drag&drop the items between slots in order to re-arrange them.
I was wondering if anyone has ever done something similar or if anyone would have any suggestions on how I can approach this.
Many thanks in advance,
- Miguel
↧
filter area acting strange?
I was trying out some filter effects in Pixi 4 and noticed by setting the filterArea the region outside the area is no longer rendered. i.e. black
Is this the intended behaviour a filterArea? I was hoping for the filter to be applied only to the specified area and leave the rest of the image unaffected.
I made a codepen here http://codepen.io/anon/pen/VjAGmJ
↧
↧
How to improve sharpness of PIXI.Graphics
I have two charts that one is used 2d canvas techniques and another one is based on WebGL (Ongoing development). Between these two charts, 2d canvas chart sharpness is far better than WebGL chart. I have done several workarounds to improve WebGL chart sharpness but still, I couldn't bring WebGL chart up to 2d canvas chart level.
2d Canvas Chart
WebGL Chart
Would like to hear any advice on the subject.
Thanks in advance!
↧
Export after resize...
So, my code:
// create app like
new PIXI.Application({
width: 1024,
height: 540,
// ...
// to do something
// ...
renderer.resize(4096,2056)
// then replace textures to hi-res , etc
// and try to get png file from canvas
var data = renderer.extract.base64()
and... data is 1024 x 540 ...
How to get data with new (resized) resolutions? Tnx
↧
Deform a sprite by its 'x' axis
Hello there,
hope to have some thoughts or solution on this.
Need to deform a sprite by its 'x' axis. In order to properly understand what I need, please, watch this vid from 0:44 with 0.25 speed (https://youtu.be/6ZJjCIiq-Yg?t=44). The sprite is a 'tail', that comes out of 'freed' bird and flying away to top left corner. By default its static and straight forward from bottom to top (just know that).
So how can I deform it to look like in the vid? Create spritesheet is not an option, the task is exactly to 'animate' the only image we have.
Looking forward to any answer or suggestion.
Thanks!
↧