• Content Count

  • Joined

  • Last visited

  1. Okay exporting it as 24 bit png solves this. Didnt know this before but the issue is with multilevel transparency and 24 bit does this but 8bit doesnt. Thanks Ivan
  2. Yep thats what i did taking the approach from that william website. i had an issue using padding to center for some reason the button presses layout got weird. using margin works. var game = { element: document.getElementsByTagName("canvas")[0], width: 1024, height: 768, }; // Get the dimensions of the viewport var viewport = { width: window.innerWidth, height: window.innerHeight }; // Determine game size let newGameWidth = viewport.width; let newGameHeight = (newGameWidth * game.height) / game.width; // resize // Determine game size if (game.height / game.width > viewport.height / viewport.width) { newGameHeight = viewport.height; newGameWidth = (newGameHeight * game.width) / game.height; } else { newGameWidth = viewport.width; newGameHeight = (newGameWidth * game.height) / game.width; } let newGameX = (viewport.width - newGameWidth) / 2; let newGameY = (viewport.height - newGameHeight) / 2; // Center the game by setting the padding of the game = newGameY + "px " + newGameX + "px"; pixi.renderer.resize(newGameWidth, newGameHeight);
  3. I'm such a noob! sorry thanks alot!
  4. Here is a playground where you can see the outline transparency turned white. I got it from the artist in psd, he hand drawn everything in photoshop, so not vector. I use the psd export layers to file, 8 bit, with transparency checked.
  5. Sorry, let me try to quickly do a demo here
  6. no compressed textures, should i be using that?
  7. A quicky.. does anyone knows why i'm getting some transparency rendered white?
  8. Anyone running to this, this is helpful resource that answered my question. I used 1024 x 768 for the game view and just downscale the let pixi do its scalling. I got some memory issue with the regular webview but with seems to be using less memory. I unload and destroy previous scenes.
  9. Hello, What I have done so far, Thanks to this awesome library. Developing a children's book with Pixi.js and cordova. I just want to reach out to the pros to get some input on my approach on things. Current approach is depending on the type i am resizing all the sprites stretching it positioning where they should be all using body.clientHeight body.clientWidth and some math. All non interactable sprites is as big as the background most of if is transparency to avoid playing around with positioning not sure if this is good.... All working in order as expected, everything looked stretched though. All this I'm doing is without consideration of how do deal with retina and pixel density. I attached one of the frame of a sprite. As you can see the frame takes the whole layout. Should I be doing this any different? The artist draws on photoshop on a canvas 2048 x 1536 pixels should i be setting the pixi application width height to that?. Whats the approach to maintain aspect without stretching and maybe just get a black bar on either vertical or horizontal side and center the image. Supporting retina? Thanks in advance.