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: TypeError: Cannot read properties of null (reading 'uid') HOT 1
- Bug: The content of multiple texts overlaps with each other. HOT 17
- Bug: [v8] antialias=true drastically cuts performance even when idle HOT 3
- Bug: Arc line cap not re-rendered if graphics is cleared HOT 1
- Bug: v8 mask container bounds changes
- Bug: Unable to add a mask to the text HOT 1
- Bug: [v8] Multiple issues with mipmaps HOT 7
- Bug: Sprite alpha masks broken in chrome & edge HOT 7
- Bug: V8 text stroke is applied even with width 0. Also strokeThickness does not update at runtime
- Bug: [v8] double `onRender` of rendergroup? HOT 1
- Bug: Can't get updated worldTransform immediately
- Bug: [v8] arctifact when rendering big polygon with offscreen coordinates in Firefox and Safari HOT 4
- Is it possible to do a lossless rotation in Pixi?
- Bug: When forceCanvas is true, mask sprites with sprites doesn't work
- Bug: Some props like dropShadow and resolution are not updating for Text object.
- Bug: Generated Texture doesn't support scale mode since 8.1.0 HOT 2
- Bug: Events are firing twice when we have dynamic and static mode
- [bug] v8 NineSliceSprite doesnt works as mask on Sprite HOT 1
- Bug: v8 ESM is broken with esm.run HOT 4
- V8 Bug! HOT 2
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.