Search the Community
Showing results for tags 'png'.
Found 23 results
-
noticing lately that certain .png assets for my game are appearing somewhat blurry in google chrome. i think it began in chrome version 93. what i'm doing now is downgrading to version 92 in order to test play, but every time chrome opens it wants to automatically upgrade to a newer version (ver 93 or 94 as of this posting). my index.html uses some image sharpening css, which i suspect may have something to do with it. they look something like this: <style> * { cursor: none; cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto; image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: optimize-contrast; image-rendering: -webkit-optimize-contrast; image-rendering: optimizeSpeed; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; margin: 0; transform: translateZ(0); } </style> any advice on how to unblur things would be appreciated. i'm sure it has nothing to do with any new lines i've added, because i haven't added any, and am also test playing a version of my game which looked sharp in ver 92 and older.
-
Hi all, I have a backdrop for a little game that I'd like to split into layers (with some particles between) nothing major probably 2-3 layers at max. The game is for mobile and file sizes have got to be as low as possible. The backdrop in question is not something that can be tiled or recreated with an atlas so I'll need to split it into a few largish images. png 32s' tend to be too heavy, 8 bit will probably lose too much colour information. I was wondering about instead using a larger jpg (eg the backdrop is 1920x1080) but maybe extending it to a square 2k, then using that with alpha masks from (colourless pngs) as an alternative (if that makes sense). I thought this way I could drop the size of the jpg more without as much degradation as a png would have (& have finer control). Hoping the colourless pngs wouldn't make as big of a hit essentially just being an alpha map.. Sounds a long way around a small problem, just theorizing atm & wondering if anyone had tried anything similar, noticed any peformance hits using masks v png or even found a nicer alternative? Cheers for any advice!
-
I can't instantiate an image layer from .png file. Is it right? me.game.world.addChild (new me.ImageLayer (0, 0, { image: 'background' }), 1); I can't get the documentation clearly from http://melonjs.github.io/melonJS/docs/me.ImageLayer.html, I want to create a scrollable background, i looked at tutorial from http://melonjs.github.io/tutorial-platformer/ but i just get the load process from TMX, i just want from normal png, can anyone help me, thank you. I've add the resource image 'background' to game.resources and load it successfully, because other image file there can be displayed by entity/sprite in my game.
-
Hi everybody, I have a plane with material and diffuseTexture. The image used for the texture is a png with transparent background. In order to keep the transparent background in babylon, I set useAlphaFromDiffuseTexture = true; on the material. But now I want to see the shadow of the image. But I cant because of the useAlphaFromDiffuseTexture parameter. So my question is : Is there a way to have the shadow of my png image following the transparent and not transparent part? Thanks for your help! Pichou
-
Hi there, I am looking into phaser framework for a game that I'm developing. I was wondering if it is possible in phaser to load custom assets (data file) that contains multiple png files and some custom information. Is is possible to open a custom file, read binary contents, and pass png data to create a phaser image/texture etc.? I love to hear if this is possible, thanks, Bram
-
Hi, I tried to follow the tutorial to manually create a skybox using 6 single texture files: https://doc.babylonjs.com/babylon101/environment#skybox There it says I can use png files for that, but when I look in the browser console, there are just error messages saying that it can't find the skybox_px.jpg etc. Is there a way to use png files, because jpg files can look really ugly in a skybox :). Following the link to eternal coding for the standard materials, it only mentions "jpg" files for CubeTexture. Also there seems to be a little error in the tutorial, where it says "In that /skybox directory, we must find 6 sky textures, one for each face of our box. Each image must be named per the corresponding face: “skybox_nx.png”, “skybox_ny.png”, “skybox_nz.png”, “skybox_px.png”, “skybox_py.png”, “skybox_pz.png”." but before it was declared as skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); When using "textures/skybox", Babylon looks for skybox_xx.jpg files directly in the textures folder, so it's a bit misleading. Maybe just change that to "textures/skybox/skybox", than the description will be ok. Thanks EDIT: Sorry, posted a bit prematurely, I should have used the search on the forum a bit more, found the answer here:
-
Hello. When I try to use png with transparency it has a very thin line where the image ends. You can see in the following example the texture has a thin grey line on the bottom side but the actual png image is completely transparent at these pixels. It might not be visible at first glance, but make the viewport of the Playground bigger and you should notice it. The line shows up on both chrome and firefox but is more visible with chrome. https://playground.babylonjs.com/#AMU9TG#1
-
Hi everyone, I have an issue with texture compression on iOS device : here is the problem : on my PC : on my iPad : the material : { "customType" : "BABYLON.PBRMaterial", "directIntensity" : 1, "emissiveIntensity" : 1, "environmentIntensity" : 0.9, "specularIntensity" : 1, "cameraExposure" : 1, "cameraContrast" : 2, "microSurface" : 0.5, "overloadedShadowIntensity" : 1, "overloadedShadeIntensity" : 1, "overloadedAmbientIntensity" : 0, "overloadedAlbedoIntensity" : 0, "overloadedReflectivityIntensity" : 0, "overloadedEmissiveIntensity" : 0, "overloadedAmbient" : [ 0, 0, 0 ], "overloadedAlbedo" : [ 0, 0, 0 ], "overloadedReflectivity" : [ 0, 0, 0 ], "overloadedEmissive" : [ 0, 0, 0 ], "overloadedReflection" : [ 0, 0, 0 ], "overloadedMicroSurface" : 0, "overloadedMicroSurfaceIntensity" : 0, "overloadedReflectionIntensity" : 0, "albedoTexture" : null, "ambientTexture" : null, "opacityTexture" : null, "reflectionTexture" : null, "emissiveTexture" : null, "reflectivityTexture" : null, "bumpTexture" : null, "lightmapTexture" : { "name" : "CleanedUp_BedroomLightmap-3_comp_light.png", "level" : 1, "hasAlpha" : false, "getAlphaFromRGB" : false, "coordinatesMode" : 0, "isCube" : false, "uOffset" : 0, "vOffset" : 0, "uScale" : 1.002394, "vScale" : 1.002394, "uAng" : 0, "vAng" : 0, "wAng" : 0, "wrapU" : 1, "wrapV" : 1, "coordinatesIndex" : 1, "isRenderTarget" : false, "renderTargetSize" : 0, "mirrorPlane" : null, "renderList" : null, "animations" : null, "extensions" : null }, "useLightmapAsShadowmap" : true, "refractionTexture" : null, "ambient" : [ 1, 1, 1 ], "albedo" : [ 1, 1, 1, 1 ], "reflectivity" : [ 0, 0, 0 ], "reflection" : [ 0, 0, 0 ], "emissive" : [ 0, 0, 0, 1 ], "roughness" : 1, "useRoughnessFromMetallicTextureAlpha" : false, "useRoughnessFromMetallicTextureGreen" : false, "useAlphaFromAlbedoTexture" : false, "useEmissiveAsIllumination" : true, "useMicroSurfaceFromReflectivityMapAlpha" : false, "useSpecularOverAlpha" : true, "useRadianceOverAlpha" : true, "indexOfRefraction" : 0, "invertRefractionY" : false, "emissiveFresnelParameters" : null, "opacityFresnelParameters" : null, "disableLighting" : false, "name" : "MUR", "id" : "39e75ac7-f7b5-4d06-98a0-50fb26b52378", "backFaceCulling" : true, "wireframe" : false, "alpha" : 1, "alphaMode" : 2 } the lightmap texture : I tried to compress with pvr format, to merge lightmaps with a white layer and use it as png, or jpg, and in albedo channel but nothing worked, any advices?
-
Is it possible with or without pixi.js to calculate the number of transparent or solid pixels for a given x/y position? My use case is that I have random trees and I want to calculate the width of their trunk at the base of the tree.
-
Is there Any way we can use a a panorama cube map as a PNG file ... NON HDR FORMAT. Right now we HAVE to split BABYLON.CubeTexture into six sides... But HDRCubeTexture allows for 1 single panorama cube map texture that it internally splits into faces... Can we make BABYLON.CubeTexture support single panorama png files... or maybe create a BABYLON.PNGCubeTexture that supports single panorama png files @Sebavan or @Deltakosh WHAT DO YOU THINK ABOUT THIS ONE
-
Hello, I recently found out that my game looks bright (sometimes too bright) only in the desktop Chrome browser (version 53) on OSX (El Capitan). Has anyone gotten similar problems? I checked up few of those Phaser bitmap examples (such as this one) but the examples do not apparently have the color difference issue. I am afraid that I might be doing something wrong with the images or the script. Thank you very much for your advices on this matter in advance. Left : Chrome / Right : Safari P.S. I tried removing color profile from image or choosing different color profiles, which did not solve the problem.
-
Howdy Babylonians! When I used the unity3d to babylon exporter it currently takes my cubemap and exports it out to a series of JPGs for the different faces of the cubemap. I would like to have use PNG files instead. I can fix this on the exporter side fairly easily by switching the command to from File.WriteAllBytes(faceTexturePath, tempTexture.EncodeToJPG()); to File.WriteAllBytes(faceTexturePath, tempTexture.EncodeToPNG()); and then also changing the output naming convetion from case CubemapFace.NegativeZ: faceTexturePath += "_nz.jpg"; to case CubemapFace.NegativeZ: faceTexturePath += "_nz.png"; When I change these it makes the PNG and names them correctly, but the exported BJS scene doesn't read in the reflection textures correctly. Here is what it looks like when I export the JPG version: - What it looks like when I switch everything over to PNGs - When I load the scene into the babylon sandbox it says " [15:15:49]: Error while trying to load texture: file:ReflectionProbe-0_pz.jpg " So it's still looking for the jpgs insted of the PNGs. Here are the settings for the shader: { "name" : "babylonjs_sample_material_reflection", "id" : "fb8dec12-8352-4e22-8ec5-83008b1780c1", "backFaceCulling" : true, "wireframe" : false, "ambient" : [1, 1, 1], "diffuse" : [0, 0, 0, 1], "specular" : [1, 1, 1, 1], "emissive" : [0, 0, 0, 1], "specularPower" : 53.588665, "alpha" : 1, "diffuseTexture" : null, "diffuseFresnelParameters" : null, "ambientTexture" : null, "opacityTexture" : null, "opacityFresnelParameters" : null, "reflectionTexture" : { "name" : "ReflectionProbe-0", "level" : 1, "hasAlpha" : false, "getAlphaFromRGB" : false, "coordinatesMode" : 3, "isCube" : true, "uOffset" : 0, "vOffset" : 0, "uScale" : 1, "vScale" : 1, "uAng" : 0, "vAng" : 0, "wAng" : 0, "wrapU" : 1, "wrapV" : 1, "coordinatesIndex" : 0, "isRenderTarget" : false, "renderTargetSize" : 0, "mirrorPlane" : null, "renderList" : null, "animations" : null }, "reflectionFresnelParameters" : null, "emissiveTexture" : null, "emissiveFresnelParameters" : null, "specularTexture" : null, "bumpTexture" : null } Is there a way I can adjust the unity exporter code to have it look for the PNGs that were created instead? Or if not is there a way to alter the shader settings after the fact to have it look for the PNGs?
-
Is there a big efficiency difference, in terms of game speed/smoothness and memory usage between using a small png for entities sprites VS using a big png and scaling it down with javascript ingame?- 7 replies
-
- 1
-
-
- efficiency
- png
- (and 3 more)
-
Hello Everyone, I am new in phaser, I am really excited to make new game with this framework I would like to know if it is possible to load asset from unity. I have some asset in unity (xyz.unitypackage) and i would like to use them in phaser, can I convert them to json and png format ? Thanks in advance
-
Hello, I have this weird problem, I am trying to add a specific cursor png for my game. I couldn't find any solutions on how to do it with phaser, so I did it with css for the specific div, but somehow it works for the first three seconds, but when I hover a button in the game the png disappears, on reload it shows up again, and when I hover a button it disappears again? Is there a way to do this with phaser? Am I missing something? Thanks!
-
hi. i'm using png or jpg for my game and i'm optimizing to reduce memory.. is using etc1 good than using png? i think capacity is bigger than png ? etc1 is efficient? thx
-
Hi, Is it possible in Phaser to actually make a certain mask area clickable? This to prevent limitation to squared click fields. Thank you, Peter
-
So I have this game that I made a while back that I am now trying to port with phaser. In this game I used individual PNG files for all my animations. From looking through the docs, it seems Phaser's animation support is just for spritesheets? Is there a way to do something like: player.sprite.animations.add('idle', ['images/s_snailIdle_0.png', 'images/s_snailIdle_1.png'], 60, true, false); player.sprite.animations.play('idle');If not, how can I change the frame for an individual sprite so I can maybe implement my own animation system?
-
Hi, I am trying to "hack" the spritesheets limitations by using JPG images with alpha channel. The process is simple: - I have a starting PNG with alpha channel - from this PNG I save a JPG (with varying fill colour for originally transparent areas) - from the PNG I extract the alpha channel and save it as an opaque indexed colour grayscale image - I load the new JPG and the grayscale PNG, and use the PNG as alpha channel for the JPG. These are the two images, the JPG and the grayscale PNG animBitmapData is BitmapData from the JPG animBitmapData_ALPHA is BitmapData from the grayscale PNG I did everything, but the last step doesn't work, animBitmapData is still opaque animBitmapData.copyChannel(animBitmapData_ALPHA, animBitmapData_ALPHA.rect, new Point(0, 0), BitmapDataChannel.ALPHA, BitmapDataChannel.RED);animBitmapData.transparent returns false, could this be the problem? Or maybe it is not correct to use a grayscale image as alpha channel? - Coding in Haxe + OpenFl -
-
- 1
-
-
- alpha channel
- bitmapdata
- (and 3 more)
-
Hey, I was wondering if it's possible to use either CSS, Canvas, HTML or JavaScript to draw elements for a game (like blocks, characters, etc..) or would I have to use a pre-made image. If this has already been answered, please direct me to the proper thread/website. I'm self-taught so a lot of examples and "dumbing down" is greatly appreciated! Thanks again in advance.
-
Hi I present to you the first version of OptiPNG for Eclipse. It is a plugin you can install in Eclipse and then use it to optimize (automatically or manual) the PNG files of your project. Optimize the PNG images help you too keep your game with a smaller size. This plugin was published in the Eclipse Marketplace: http://marketplace.eclipse.org/content/optipng-eclipse So you can install it through the Marketplace Client featured by Eclipse. Read the full guide here: https://bitbucket.org/boniatillo/eclipse-optipng If you are a Phaser developer, there other tools for Eclipse too: Phaser Chains for Eclipse Phaser Editor Templates Here I let you with some screenshots of OptiPNG for Eclipse: Keep updated with @boniatillo_com
-
Hi ! First, sorry for my bad english, i'm french and really not good in english... So, I'm creating a game, with sprites animations on click, all is right with this, but i test it on mobile today and there is a black square at the place of my png sprite, all of the other png are correctly displayed ! I've an other png animated in game wich is not on click event, it works perfectly... i don't understand the prob..? Could u help me please ! ps: If you don't understand anything, i can try to explain better ! Thanks !
-
Phaser ver 2.0.3-2.0.4 ____________________________________________________________________________________________________________ NOT SOLVED YET ____________________________________________________________________________________________________________ Firstly, I'd like to ask whether bitmap fonts are faster than webfonts when rendering with strokes. ____________________________________________________________________________________________________________ QUESTION IS SOLVED ____________________________________________________________________________________________________________ Secondly, I cannot load my bitmap font. I've tried http://kvazars.com/littera/ and FontBuilder for generating the xml and atlas (also converted *.fnt to *.xml) but Phaser keeps saying that error on adding that damn font when I'm trying to place it on the scene: Uncaught TypeError: Cannot read property 'size' of undefined phaser.js:2806 PIXI.BitmapText.updateTextphaser.js:2806 PIXI.BitmapTextphaser.js:2749 Phaser.BitmapTextphaser.js:31321 Phaser.GameObjectFactory.bitmapTextphaser.js:26296 SetupGUIpopulo.js:93 StartGameplaypopulo.js:290 mainmain.js:79 Preloader.createpreloader.js:146 Phaser.StateManager.loadCompletephaser.js:14388 Phaser.SignalBinding.executephaser.js:15296 Phaser.Signal.dispatchphaser.js:15174 dispatchphaser.js:14941 Phaser.Loader.nextFilephaser.js:44211 Phaser.Loader.xmlLoadCompletephaser.js:44162 _xhr.onload That trouble almost stopped my development process. It is really annoying. I guess the font was not really loaded. But why there was no Phaser log error that says what is really wrong? I've found similar topics: http://www.html5gamedevs.com/topic/3688-how-to-make-bitmap-fonts-from-regular-fonts/, http://www.html5gamedevs.com/topic/1923-how-to-generate-xml-png-for-bitmaptext/, but none of them contain the real solution that worked for me. ____________________________________________________________________________________________________________ Sorry for my stupidness, the second question is solved. I was adding the bitmapText with the different font key.
