Comments (3)
Ah yes! This is because the image for the texture has not loaded so it has no idea what its width and height is :/
It pretty much behaves exactly like a regular HTML image in that sense.
The way I have been solving this is by using the assetLoader to preload my images. That way the width and height is always set correctly when I create my textures like this:
var assetsToLoad = [ "stone.png"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoad);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
function onAssetsLoaded()
{
var texture = PIXI.Texture.fromImage("stone.png");
var sprite = new PIXI.Sprite(texture);
// this will log the correct width and height as the image was preloaded into the pixi.js cache
console.log(stone.width + ', ' + stone.height);
}
Another way would be to add an eventlistener to your texture. When the image has loaded it dispatch an 'update' event.
var texture = PIXI.Texture.fromImage("stone.png");
var sprite = new PIXI.Sprite(texture);
if(texture.baseTexture.hasLoaded)
{
// this will log the correct width and height as the image has already loaded
console.log(stone.width + ', ' + stone.height);
}
else
{
texture.addEventListener("update", onTextureUpdate)
}
function onTextureUpdate()
{
// this will log the correct width and height as the image has loaded
console.log(stone.width + ', ' + stone.height);
}
Hope that helps :)
from pixijs.
Its also possible to do such thing : #29
change setTexture function to verify if width & height was set
from pixijs.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from pixijs.
Related Issues (20)
- Bug: When drawing a line, it cannot be displayed, but when drawing two lines, it can be displayed normally. HOT 1
- Feature Request: It is not possible to set the default margin and padding of all elements to 0 when rendering HTMLText. HOT 4
- Bug: `Filter#blendRequired` does not work with WebGL if no WebGPU program is present HOT 1
- Bug: pixi.text v8.2 cannot display on some old android devices. HOT 4
- Bug: removeChild() not working when using a container from pixi.stage HOT 2
- Bug: Memory leak in `RenderGroup#childrenToUpdate` and `RenderGroup#childrenRenderablesToUpdate`
- Bug: When using smartlook to record in website canvas use the canvas flickers HOT 1
- Bug: `CullerPlugin` culls based on the transforms of the previous frame
- Bug: Advanced blend modes don't work in combination with filters HOT 1
- Bug: null texture in the batcher (8.2.3 regression) HOT 1
- Bug: Advanced blend modes do not work on `Filter` HOT 1
- Bug: Advanced blend modes are not applied individually to each object
- Feature Request: Pixi ft. Deno HOT 1
- Bug: Combination of stroke and padding produces incorrect values for textSprite.width and textSprite.height HOT 2
- Bug: cacheAsBitmap caches with worldAlpha in v7.4.2
- Bug: Unable to catch Assets.load error
- Bug: Rope mesh instances end up sharing same texture with WebGPU backend.
- Bug: Proxy `Graphics` of a `BitmapText` is not cleaned up before being returned to the pool
- Bug: Cannot assign mask to container through constructor options
- Bug: `clearBeforeRender` has no effect on WebGPURenderer HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixijs.