Jump to content

Search the Community

Showing results for tags 'image'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

  1. Hello everyone! Maybe someone has experience and can share with it. The question is how you guys croping media content inside PIXI Application. I have a lot of different stock video and images with different sizes. User can choose aspect ratio of final result: landscape (1920x1080), square (1080x1080), vertical (607,5x1080). The size of main container always is 1920x1080. Also there should be good resolution, let`s say: PIXI.settings.RESOLUTION = 2; I made some images to demonstrate how I want to make it. For example, user can choose vertical ratio and w
  2. The most prominent method for loading textures seems to be the .fromImage functions, which use URLs. What if I have a raw image source, but no URL (like an image generated inside the app). How would I go about making a texture out of that?
  3. I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you! I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project. H
  4. Ram M

    Graphic

    Hi I want to know the Application for sprite creation for 2d games.Which one is good in quality wise and size also.Any idea about this please share with me.
  5. There is an IMAGE game at https://www.html5pcode.com/a1yimageoptions.htm that was designed to teach the art of coding. It uses structured programming, so it is easy to follow the logic of the design. The game is divided into small self contained pieces. It has a main program and a subprogram. The subprogram has routines that perform specific tasks when they are called by the main program. The game has links to YouTube videos that describe the operation of the main program and the subprogram routines. Once you learn how to design games like this one, you can go on to design your own games in Ja
  6. Hi everyone, I have a question, I think there maybe a question like mine posted somewhere, I tried to find but can't have a good answer. In my scene, I have a lot of picture, I use Sprite.fromImage to load those picture instead of PIXI.loader because my pictures don't load at the first time. Because of many pictures, so my scene has very low FPS, I think it probably because I load directly raw picture from path. Does anyone know can advise me anyway to fix this. Thank you!
  7. Guys, We recently have new requirement that we need to save the content we rendered with pixi.js to image file like PNG. The canvas's toDataURL method worked well at first, however we need more than that. The content (a diagram) could be zoomed and the canvas only shows part of that diagram at the time we save the image. Also, if we zoom out and try to capture the whole diagram, the output diagram seems not so crisp, or sharp. Hope I've made my self clear. So, my question is whether their is a way to export the whole content image with desired resolution?
  8. What property do I need to use to crop an image? I feel I must be missing something utterly obvious, but without any docs I'm a bit lost. I adding an image from a loaded texture thus: - this.add.image(x, y, image); The image is (say) 64 x 64 pixels, but I want to only display 32 x 32. Whatever property I set, it either has no effect at all, or it scales the image instead of cropping it. Could someone point me to the right property please?
  9. Hi, I wanted to try the latest preview release, but my IDE says that "Image" does not exist on type "typeof GUI". By looking at the available types from the GUI, the IDE suggests GUIImage, so I replaced everything with GUIImage. Now I get a console error in my browser, saying "TypeError: BABYLON.GUI.GUIImage is not a constructor". I get the same error on the playground, which btw also suggests GUIImage. By looking at the source code, I think this was intentional, but it isn't mentioned in the what's new file for the preview release. You can see the error on the playgro
  10. 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
  11. Hello, I have to control depth of meshes with alphaIndex in my situation. but when meshes are over 10, rendering gets strange. https://www.babylonjs-playground.com/#BTU1J7#1 need your help. thanks.
  12. Hi all, I need to display a large image and dynamically hide sections of it. I already use masking to specify which parts should be displayed. The code I use to achieve this is in the form: this._topMask = game.add.graphics(0, 0); this._topMask.drawRect(0, 170, game.width, vm.ActiveGameHeight - 320); this.defaultGroup.mask = this._topMask; This is useful in that it gives me a rectangle within which the image renders. Now I need to dynamically block sections of that rectange and create areas that are not rendered. Ideally, I would like to be able to create
  13. I'm getting a struggle here with images and dropzones. I want to check if an image fits exactly into a dropzone. If not then the image returns automatically back to its original place (gameObject.x = gameObject.input.dragStartX; gameObject.y = gameObject.input.dragStartY; ) How can i check if x and y of the image is the same with the dropzone? The above code is not working if ((gameObject.x != dropZone.x) && (gameObject.y != dropZone.y)){ gameObject.x = gameObject.input.dragStartX; gameObject.y = gameObject.input.dragStartY; }
  14. I'm having a hard time trying to do something that should be quite straightforward, so I'm not sure what I'm missing. How do we scale an image (to use as a game background) to fit the window? This is my approach, which doesn't work: preload() { this.load.image('bg', 'space3.png'); } create() { const bg = this.add.image(0, 0, 'bg'); bg.width = window.innerWidth; bg.height = window.innerHeight - this.parent.canvasOffset; // I would like to use this.game.width and this.game.height but those values don't exist } If I use bg.scaleX and bg.scaleY and set the values to 2
  15. Fedor

    WebP

    Does anyone know where to find the fileformats PixiJS supports? Or is the support simply the same as the browser support for file formats? To be more specific: does PixiJS support the WebP fileformat? It would be great if it did, since WebP offers better and higher compression than PNG and JPG.
  16. Hi, I have image in cache on which multiple sprites are based like this: a = game.add.sprite(0, 0, "image"); b = game.add.sprite(0, 0, "image"); Now: I want to change the underlying image's data like e.g. this (notice the "image" as argument to generateTexture): game.cache.getBitmapData("somedata").generateTexture("image") This fails at runtime. According to what I've found out so far, I have to do it like this: game.cache.getBitmapData("somedata").generateTexture("image", function(texture) { a.loadTexture("image"); b.loadTexture("image"); }) The question is: is
  17. I'm looking at switching away from CreateJS, but I've got one snag I need to resolve before I can feel comfortable making the switch. I build my JS applications using Webpack, and one of the features I take advantage of is asset bundling. Webpack will bundle things like images or text files into JS files that can optionally be asynchronously fetched. Depending on my target platform, I can either release an all-in-one JS file, or I can release a main file with bundles that can be loaded asynchronously when needed (such as when loading the level they're used in). What this means is that my
  18. I have this simple game for small children that consists on several images that when tapped should produce a sound. I got it working on the computer (mouse click) but not on mobiles (finger tap) and I suspect that's because I am listening to the wrong event. Could someone tell me how to listen to a image "tap"? My current working code for computers is: // I am adding the functions and listeners dynamically with a // loop so aAssets is an array containing the image elements // enable input window[aAssets[i]].inputEnabled = true; // create the function to be triggered by the list
  19. I was not able to reproduce this in the playground. Does anyone have any idea what could be causing this darkening effect on the GUI text? The GUI text is drawn on planes and the GUI image below it is about 5 units away. Also, the image is a svg, but I also tried with png and the same thing happens. The scene also has fog... and a clear color of that blue on the background. If I rotate the camera, the text will randomly lightup/darken on certain parts of the GUI image below it even though they are far apart on the Y plane. Could this be a bug?
  20. I am trying to test out persistence of objects--at the moment an image, but eventually a group that will be a UI component. Right now, my image that I want to persist ("persist") goes from State1 to State2 just fine, but when I go back to State1, it disappears and I get an error ("uncaught typeError: cannot read property 'compressionAlgorithm of null in Phaser.js" and then points to a bunch of pixi.webgl render locations) Why is the item disappearing if it's been added to the stage, and how do I overcome this problem? Here is the code for State1: var state1 = { prel
  21. I have an mp4 video file (H264 encoded). I want to create a PIXI.extras.AnimatedSprite from this video to be able not lagging reversed animation play; If I splice this video to image sequence the size becoming huge (about 8Mb vs 500kb of mp4). I want to load low size mp4 file and extract image array from it to create an Animated Sprite. Reverse playing directly from <video> by changing video.currentTime is lagging. I want to create something like hover/unhover animation.
  22. Hi, I'm testing code at: https://www.babylonjs-playground.com/?shadows and want to try my own image for the ground. On line 35 I put “http://www.rhgrafix.com/images/ground.jpg” instead of "textures/ground.jpg", I control+click on it and sure enough my image comes up in browser, but when I hit Run I just get the default checkered image. Why is this happening? Thanks, R.L. Hamm
  23. I am making a level viewer for a game using phaser, I loop through a large array representing the game grid and take the item names from the game save and place them in my phaser world in a loop. I take whatever the game name for the item is and map it to a phaser image, my issue is that I don't want to map every possible item type to an image, if phaser askes for an image that i have not loaded, can I just ignore it without the green texture being plastered over it?
  24. Hi, Is there a way to render a part of 2D image on the screen with fixed position? Like in CSS we have position: fixed, position.left and position.top. I would like still to be able to use babylon.js options vOffset, uScale and wAng, like for textures, to move a visible part of the image. I could use a Plane with a texture, but I don't see an option to disable texture's repetition. Also I don't see a way to place it where I need on the screen with needed width/height. And still.. I need to disable lighting for it, set emissiveTexture, etc. So maybe there is a cleaner way to do this?
  25. Can we do something like Image.drawWarped (link goes to the javadoc of slick2d) with pixi.js? It gave devs the possibility to define where to render the 4 corners of an image with absolute x, y locations and it automatically skewed the image to fit in. I guess it just redefined the points of the triangles used to render the image or something like that. (I'm not that fit with gl, thats why I use pixi.js.^^) Thanks.
×
×
  • Create New...