Search the Community

Showing results for tags 'extract'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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

Found 5 results

  1. Hello everyone. I am a newbie using pixijs. I recently worked on a project using pixijs. When I use the export image function by extract, if PIXI.settings.RESOLUTION is not set, the browser on mobile device can export the image, but the image is particularly bad, but when I set PIXI.settings.RESOLUTION, the image export fails. How can I export HD pictures on mobile device? I intercepted the error report and write a demo. Can't Upload attaches. So I paste code here. Sorry my bad english. <html> <head> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <script src="https://cdn.bootcss.com/pixi.js/5.0.4/pixi.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> body{ margin: 0px; padding: 0px; } .renderCanvas{ width: 100%; height: 100%; } </style> </head> <body> <div id='canvasDiv'> </div> <script> $(function(){ var width = document.body.clientWidth var height = document.body.clientHeight var props = { width: width , height: height, antialias: true, preserveDrawingBuffer: true, autoDensity: true, resolution: window.devicePixelRatio, backgroundColor:0xffffff, } var renderer = null if(PIXI.utils.isWebGLSupported()){ props.forceFXAA = true renderer = new PIXI.Renderer(props); }else{ renderer = new PIXI.CanvasRenderer(props) } //desktop browser can exports retina image ,but mobile browser get error PIXI.settings.RESOLUTION = props.resolution var stage = new PIXI.Container(); $('#canvasDiv').append(renderer.view) var ticker = new PIXI.Ticker(); ticker.add(() => { renderer.render(stage); }, PIXI.UPDATE_PRIORITY.LOW); ticker.start(); var content = new PIXI.Container(); //large content var bg = new PIXI.Graphics() bg.beginFill(0x90c282) bg.drawRect(0,0,width ,height*4) bg.endFill() content.addChild(bg) //a line testing let obj = new PIXI.Graphics() obj.lineStyle(2, 0xff0000); obj.moveTo(0,0) obj.lineTo(200,200) let tempBg = new PIXI.Graphics() //draw two object, one out of viewport and one in viewport tempBg.lineStyle(2, 0xff0000) tempBg.drawCircle(100,400,50) tempBg.lineStyle(2, 0xff0000) tempBg.drawCircle(100,height*3+200,50) content.addChild(obj) content.addChild(tempBg) stage.addChild(content) //simulate viewport move content.y = -height*3 //simulate save image action setTimeout(function(){ const imageUrl = renderer.plugins.extract.base64(content,'image/jpeg'); //console.log(imageUrl) let link = document.createElement("a"); link.href = imageUrl; link.download = "picture.png"; link.style.display = "none"; document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); },2000) }) </script> </body> </html>
  2. Hello Everyone, I want to share with you my latest pet project, it is a tool to extract images from a spritesheet, it's called SpriteSplitter, all informations are in the github : https://github.com/bmarwane/spriteSplitter . I don't know if i can put links to binaries on the forum but you will find in the repo page some pre compiled ones plus instructions on how to run the project yourself. Instructions : Open the App and load a sprite Make sure that the top left pixel on your image represent an empty area, for example if the space between the frames in a sprite sheet is transparent, the top left sprite neet to be transparent, i will make this configurable some day, but feel free to fork the project and do it if you want. Select frames Save on Disk Here is a screen capture of the app, the selected frames are overlayed with an ugly red ( will definitely change the color ) I created this tool mainly as a learning experience, and also because the only tool that i know that do this is on windows ( see ASU ). SpriteSplitter was created using ElectronJS, so the app is multi plateform, but i tested it only on mac and Linux, can any of you guys confirm to me that it's working on windows ? That's all folk, what do you think ? Thank you.
  3. So, my code: // create app like new PIXI.Application({ width: 1024, height: 540, // ... // to do something // ... renderer.resize(4096,2056) // then replace textures to hi-res , etc // and try to get png file from canvas var data = renderer.extract.base64() and... data is 1024 x 540 ... How to get data with new (resized) resolutions? Tnx
  4. 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.
  5. Hi. I have a newbie question. So I create a new PIXI application, draw a blue square onto it, wait a couple of seconds, and then manually start a function to extract the pixels. The extracted pixels are always black. If anybody could help me find out why this is the case, that would be great. The blue square is correctly drawn and visible, and the extract function gives me a correct array of data, but all pixel information in it is black. As I execute the extract function right now manually, it's not possible that it's extracted too early or something like that. Here are the important bits of the code: initPixi() { let type = "WebGL"; if(!PIXI.utils.isWebGLSupported()){ type = "canvas"; } this.pixi = new PIXI.Application({ width: 0, height: 0, antialias: false, transparent: false, resolution: 1, autoResize: true, view: $('.imgCurrent')[0] } ); } updatePixi() { this.pixi.renderer.resize(this.imgWidth, this.imgHeight); this.pixiDraw(); } pixiDraw() { let rectangle = new PIXI.Graphics(); rectangle.beginFill(0x66CCFF); rectangle.drawRect(0, 0, 200, 200); rectangle.endFill(); rectangle.x = 0; rectangle.y = 0; this.pixi.stage.addChild(rectangle); } pixiExtract { this.pixi.renderer.extract.pixels(); }