Quantcast
Channel: Pixi.js Latest Topics
Viewing all 3978 articles
Browse latest View live
↧

Typescript, ES6 and treeshaking

January 9, 2020, 6:18 pm
$
0
0

Hi all,

I'm currently building a game with Pixi in Typescript. I'd like to use the ES6 modules, as I'm under the impression that by doing so, I should be able to treeshake any unused PIXI code out of the final build / load it in chunks on demand.

So -- do we have a set of Typescript definitions for each Pixi ES6 module, something like:

declare module '@pixi/app' {
 class Application ...
}

-- or am I just doing it wrong, and treeshaking already works with import * as PIXI from 'pixi.js'?

Quick caveat: I'm new to both Pixi and Typescript, but wildly experienced at misunderstanding and breaking stuff.

↧
Search

Possible to attach another Spine sprite to a Spine sprite's slot/bone?

January 9, 2020, 12:28 pm
$
0
0

Hi,

I'm using Pixi, Spine and https://github.com/pixijs/pixi-spine. I've been reading through the code but can't see a way to attach a Spine sprite to another Spine sprite's bone/slot. Is this possible? I have been able to swap out an attachment for another Texture, but not another sprite.

The use case is that we'd like our player sprite (a Spine sprite) to be able to hold weapons which are another Spine sprite, where the weapon can be swapped in and out. This seems like it would be a fairly common use-case, so I feel like I'm just missing how to do it. If it's not possible, are there other ways people have done this in the past with Spine?

Thanks for any help anybody can offer.

↧
↧

How to Disable Font Antialiasing

June 11, 2016, 4:17 pm
$
0
0

I have this set in CSS to force pixellized images: 

canvas, img { /* makes a change, noticeable [28/05/16] */
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

I've tried this for fonts: 

font-smooth: never;
	-webkit-font-smoothing : none;

It doesn't work

This is my renderer: 

renderer = new PIXI.autoDetectRenderer(width,height,{antialias: false, transparent: false});

Yet from my experience antialias:false doesn't do much

Pixi V4 by the way

Any ideas how to improve the font rendering?

As it is, even at 36px, the text is awful, and I want it at 12px, at 12px, it's enough to make someone puke

awfultext.png

↧

Multi style text

January 12, 2020, 11:11 am
$
0
0

How can I manuly apply two different styles to text?

For example:    Simple Text

 

My code:

const text = new PIXI.Text('Simple Text');
text .style = new PIXI.TextStyle ({
                       fill: 0x2d2c2f,
                       fontSize:20
                   });
↧

PIXI.ParticleContainer and Spine

January 14, 2020, 4:45 am
$
0
0

Im trying to use a spine in a PIXI.Particlecontainer with no luck 🙂 

 
const sprites = new PIXI.ParticleContainer(100, {
            scale: true,
            position: true,
            rotation: true,
            uvs: true,
            alpha: true,
        });
       app.stage.addChild(sprites);




const mImgSpine = new PIXI.spine.Spine(this.mpAssets.con);


  sprites.addChild(mImgSpine); // this fails

 

Getting the error: Cannot read property 'baseTexture' of undefined

Anyone knows if it's possible or its just a stupid idea 🙂 

 

It works fine with a sprite:   

const mImg = PIXI.Sprite.from(this.image);

sprites.addChild(mImgSpine); // this fails

 

↧
↧

Loader: reload failed resources

January 14, 2020, 8:30 am
$
0
0

Hello. My game loads many resources (100+); on specific PC occasional weird error happens: net::ERR_CONNECTION_RESET 200 OK for several files so loading abrupts. I failed to google what that error even means and every time it happens to different files and in 1 in 20 times game loads successfully. Errors I dealt with previously was 404 (Not Found) which was caused both by absent network or absent files, so I was just reloading the whole page hoping for network connection to recover.

Anyway, error is an error, so failed files need to be recovered somehow, but I don't know how to do it yet. How can I know what files failed to load?

Quote

PIXI.loader.onError.add( w => console.log( w ) )

Prints: Error: Failed to load element using: IMG

Is there a way to know which file failed to load? How can I add failed file back to the loading bundle continuing the ongoing loading process? If sub-resource failed to load (for example, .png file of .json spritesheet) should I re-queue that sub-resource or it's parent?

Thanks in advance.

↧

PIXI.BitmapText and fnt files

January 16, 2020, 5:33 am
$
0
0

Hey

im trying to find a way to load the png file directly, instead of using the fnt reference: 

<page id='0' file='myfont.png'/>
 
Is there a way to do something like this:
 
const bitmapFontText = new PIXI.BitmapText('some text',  "myfont.png", { font: '20px myfont', align: 'left' });
or another workaround.
↧

Need help of migrating shader from v4 to v5

January 16, 2020, 9:52 am
$
0
0

I saw some cool smoke filter on a tutorial site but it was really old (like Pixi 2.0).

I managed to get it to work on v4 but I don't know how to goto v5...

https://jsbin.com/mabapatetu/1/edit

Can anyone help me?

↧
Search

vTextureCoord and custom filters on Pixi v4

February 21, 2017, 12:09 pm
$
0
0

Hi guys!

I'm trying to figure out how to apply some custom frag shader into a filter. The intented effect is a simple crt warp over a sprite.

Here is what I got so far: https://jsfiddle.net/djq6kjx4/1/ but It should look something like the image in the attachment.

As you can see from the example above the warp effect is mostly visible to one corner. Now I'm starting with shaders but I think the reason is that vTextureCoord is somehow off?

I tried to use the mapCoords and unmapCoords from https://github.com/pixijs/pixi-filters/blob/master/src/pixelate/pixelate.frag similarly without success (I have no Idea what those do). :unsure:

Some time after I tried to use gl_fragCoord directly like this: 

vec2 coord = gl_FragCoord.xy / dimensions.xy;

wich seems to do the trick but the texture comes out flippled. Im sure it can be fixed but I don't think this is a good path to follow. Right?

 Any hint would be much appreciated :) Thanks

warp.png

↧
↧

How does the render work?

January 17, 2020, 7:16 pm
$
0
0

When my game is played (colonist.io) it heats up the computer. Does it draw everything on the page every tick?

 

For example I have a lot of tiles https://prnt.sc/qpc4l6 after drawing them all once would it increase the performance if I made them cacheAsABitmap? Could this be the reason why it is using a lot of resources or is it something small?

There are around 110 sprites on the map (tile, dice, port etc.) and these do not change throughout the game. Are these using a lot of resources just staying the way they are. If I cache them as bitmap would the game use less resources? How can I track the resources they use?

↧

Antialiasing in pixi-tilemap AND pixi-tilemap layer types

January 17, 2020, 11:57 pm
$
0
0

Hi! I am currently trying out pixi-tilemap. All works well except that CompositeRectTileLayer is making everything blurry when I had set the SCALE.MODE to NEAREST (my sprites are not blurry, only the tile layer). I then foolishly tried RectTileLayer and it isn't antialiasing (great!), but I cannot get addFrame to actually insert the right texture.

My first question is, what is the difference between CompositeRectTileLayer and RectTileLayer? And what about the rest of the classes like GraphicLayer? There is no documentation anywhere on the web on in the src folder.

My second question is, how to disable antialiasing in CompositeRectTileLayer? (or alternatively, why RectTileLayer only accepts 1 texture)

 

I am using the pixi.js v4 version of pixi-tilemap. I have included the way I am currently adding textures to both layer: 

var tiles = new PIXI.tilemap.CompositeRectTileLayer(0, [texture1, texture2], true);
this.tiles.addFrame(0, x1, y1);
this.tiles.addFrame(1, x2, y2);

//this works for CompositeRectTileLayer, but doesn't work for RectTileLayer...
//RectTileLayer displays texture1 on both x1,y1 x2,y2

I have attached the CompositeRectTileLayer vs RectTileLayer effect.

test2.png

test1.png

↧

In pixi-tilemap, should I redraw the frames when the camera moves?

January 18, 2020, 1:01 am
$
0
0

Right now i have a 30x30 tiles layer with pixi-tilemap, and I simply use tiles.pivot.set(camerax, cameray) to move around (it works well). With sprites, I know I have to manually set renderable = true/false for sprites that are in/out of the screen, to reduce the renderer's workload. However, with pixi-tilemap, I am not sure whether I should redraw the tiles depending on where the camera is.

My question is: Suppose I have a 3000x3000 tiles map, and my screen only shows 20x10 at any given moment, should I render the 3000x3000 tiles before the game begins and use tiles.pivot.set(camerax, cameray), OR should I only addFrame 20x10 tiles, then clear and addFrame again if camerax/cameray changes?

The structure of pixi-tilemap gives me the impression that it is all automated depending on what is seen on the screen but I could be very wrong. In Alan01252's  tutorial, the clear function is nowhere used, which makes me think that one can addFrame as many times as one needs, but it seems very sketch after I read the source code a bit more...

↧

Performance, Batch Rendering, Draw Calls

January 18, 2020, 2:07 am
$
0
0

Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?

Untitled-1.jpg

↧
↧

Sprite blending

January 18, 2020, 2:58 pm
$
0
0

Does anybody have any suggestions on how I can get this effect using PixiJS? I'm new to PixiJS and game development in general so any suggestion would be great.

How I think it works is that the water sprite is rendered on a higher layer and has its edges transparent. The only thing that doesn't work when I think about it this way is that the cells overlap eachother which doesn't make sense if each cell is in a grid at a fixed size.

Hope somebody can help demystify how I can accomplish this in PixiJS.

Thanks

unknown.png

↧

custome Event for pixi

December 17, 2019, 12:17 am
$
0
0

hi friends.

I want dispatch a custom event for one sprite. 

for example:

when click on bunny sprite. dispatch an event that name is : sayHello.

i wirte this code:

Quote


const container = new PIXI.Container();

app.stage.addChild(container);

// Create a new texture
const texture = PIXI.Texture.from('examples/assets/bunny.png');

const bunny = new PIXI.Sprite(texture);
container.addChild(bunny)
bunny.anchor.set(0.5);
bunny.x = 300;
bunny.y = 200;

bunny.interactive = true;
bunny.buttonMode = true;

bunny.on('click', function(){
    const event1 = new CustomEvent('syaHello', {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    })
    
    this.dispatchEvent(event1)
})

document.addEventListener('sayHello', function(e){
console.log(e)

but when run and click on bunny show this error:

Quote

this.dispatchEvent is not a function

but if i change this code:

this.dispatchEvent to -> document.boy.dispatchEvent

work successfuly.

but i Want dispatch to my sprite or container . can do it????

↧
Search

Tips on isometric games with PixiJS

January 19, 2020, 1:49 pm
$
0
0

Hi people, 

I'm about to start a personal project and I'm thinking to go with pixijs. Is about a city builder isometric-game. I would like to know if anyone have any tips, suggestions or can point me directions of the problems I may find ahead.

Several years ago, I did a lil project with PixiJS for my graduation and I remember have a good time with it. But couple years before I had a real pain trying to come up with a isometric game in Construct 2, so I'm quite afraid of follow up with this genre.  

Any advice will help, since I'm starting blank.
Thank you all.

↧

How remove Canvas2d object creted after PIXI.Graphics on use generateCanvasTexture

January 20, 2020, 3:04 am
$
0
0

Hi , question about GC or how i can clean canvas2d object after use method  generateCanvasTexture
game use PIXI.WebGLRenderer - only

PixiJs version 4.8.2 (this my pain, but i can`t up pixijs to v5)

on class 
this.data:PIXI.Graphics
this.view:PIXI.Sprite
....
on sometimes i need redraw data on view
this.texture =this.data.generateCanvasTexture(PIXI.SCALE_MODES.LINEAR,1);
this.view.texture = this.texture;

on next time try to clean  this.texture, remove from 

PIXI.Texture.removeFromCache 
this.texture .destroy(true);
delete this.texture ;
 

but debug console in Safari (tab Canvas) show all Canvas wich  created on method generateCanvasTexture, but they never destroyed on memory 

How i can do clean up memory on it?

↧
↧

How to change texture of SimpleRope mesh?

January 20, 2020, 11:35 pm
$
0
0

I have tried to change the texture of SimpleRope mesh  by mesh.texture = "new texture" at run time... But it's not changing. Even I have tried by mesh.material.texture as well. Both didn't work for me.

Can anyone please help?

↧

How custom filter works with a sprite that has rotation is set ?

January 20, 2020, 11:08 pm
$
0
0

Here's my pixi playground.

https://www.pixiplayground.com/#/edit/huvn96zZqn-UfdrhsUXv7

image.thumb.png.f13bbae1a0bee653a1360e0c5188a059.png

The shader I've written is from "The book of shader, chapter five".

Basically it draws a line and a nice gradient from black to white. You can see right top one on the above screenshot.

And then I rotated the sprite by 45, then as you can see, my expectation is it only draws pixels inside the blue rectangle I marked on the bottom right.

But somehow it draws pixels on the whole bounding box.

The question is how to achieve my goal when rotation is applied to the sprite?

 

↧

Compressed textures bleeding edges

January 21, 2020, 12:38 am
$
0
0

Hi,

I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3:

If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images:

image.thumb.png.b6d4774c22bd773934a770c88a0fadc2.png

If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ...

This is the complete code: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>PixiJS v5 Compressed Textures Bleeding</title>
        <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script>
    </head>
    <body>
        <script>
            //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST
            
            const app = new PIXI.Application({
                width: 1024,
                height: 512
            })
            document.body.appendChild(app.view)

            new PIXI.Loader()
                .add('photo1', './1.dds')
                .add('photo2', './2.dds')
                .load((loaderInstance, resources) => {
                    const sprite1 = new PIXI.Sprite(resources.photo1.texture)
                    const sprite2 = new PIXI.Sprite(resources.photo2.texture)
                    sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512
                    sprite2.x = 512
                    app.stage.addChild(sprite1, sprite2)
                
                    app.stage.scale.set(.8, .8)
                })
        </script>
    </body>
</html>

 

Has anyone a good idea?

Siddi

↧
Viewing all 3978 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>