The VG Resource

Hi, I am trying to rip sprites from an io game, but the sprites constantly appear and disappear, making it hard to extract sprites that I need. Can anyone help? Thanks!

Hi DemoCrew19!

Which .io game are you trying to rip from?

Also, just to note, most of the sprites drawn in .io games are rendered as scalable graphics, therefore making them only containable in something like an .svg file or the code of the game itself. This can result in inaccurate rips (I'm assuming you're trying to rip by screenshotting, based on your comment on the sprites constantly appearing and disappearing) and, therefore, leave you with incorrect sprites.

You might be able to just use your browser's developer tools to monitor network requests for images. Here are some spritesheet examples I found from Agario using the Network tab of the Google Chrome developer tools:

• https://agar.io/mc/atlas/main_shop.png
  
• https://agar.io/img/menusLeaguesUI.png
  
• https://configs-web.agario.miniclippt.co...ionsUI.png
  

(11-28-2018, 09:46 AM)Resistiv Wrote: [ -> ]Hi DemoCrew19!

Which .io game are you trying to rip from?

Also, just to note, most of the sprites drawn in .io games are rendered as scalable graphics, therefore making them only containable in something like an .svg file or the code of the game itself. This can result in inaccurate rips (I'm assuming you're trying to rip by screenshotting, based on your comment on the sprites constantly appearing and disappearing) and, therefore, leave you with incorrect sprites.

Hi, I'm trying to rip from mope.io. Also, I mistyped , I am using chrono download manager to rip the images. The only time a sprite appears in the manager, it's on the screen, and vice versa.

________________________________________________________________________________________________________________

Okay, I see!

So, I did some digging and I found the address where mope.io stores all of the animal skins, which is in an easy to access directory!
You can find it here, and download all of the images from it.

Hope this helps, cheers!

Wow, not many websites leave the directory listing door open.

I ran it through a URL fuzzer. As well as http://mope.io/skins/ as linked to by Resistiv, there is also http://mope.io/audio/ and http://mope.io/img/.

(11-28-2018, 07:19 PM)Resistiv Wrote: [ -> ]Okay, I see!

So, I did some digging and I found the address where mope.io stores all of the animal skins, which is in an easy to access directory!
You can find it here, and download all of the images from it.

Hope this helps, cheers!

(11-29-2018, 01:03 PM)Simpsons Dumper Wrote: [ -> ]Wow, not many websites leave the directory listing door open.

I ran it through a URL fuzzer. As well as http://mope.io/skins/ as linked to by Resistiv, there is also http://mope.io/audio/ and http://mope.io/img/.

Thanks, I'll be sure to mention you both when I make the sprite sheets.
Incidentally, what's an URL fuzzer?

A URL fuzzer is a utility that searches the sub-directories on a website through a dictionary-like pool of common sub-directories to find anything that may be hidden normally.

(11-30-2018, 04:07 PM)Resistiv Wrote: [ -> ]A URL fuzzer is a utility that searches the sub-directories on a website through a dictionary-like pool of common sub-directories to find anything that may be hidden normally.

Thanks, do you know of any for a chromebook? (That's the device I normally use)

There is this online one from Pentest-Tools.com, alongside this program that you may be able to build on Chromebook (since it does run on Linux).

Thx. How would you do io games that don't work w/ the url fuzzer? (lets say... diep.io)

diep.io draws basic shapes to a canvas element. There's no easy way of ripping it as such.

All I found was the title screen background (https://static.diep.io/title.png) and, if you really want to rip the sprites, you can dig around in the code here: https://static.diep.io/build_9b9e4489cd4...35.wasm.js

(12-03-2018, 01:50 PM)Simpsons Dumper Wrote: [ -> ]diep.io draws basic shapes to a canvas element. There's no easy way of ripping it as such.

All I found was the title screen background (https://static.diep.io/title.png) and, if you really want to rip the sprites, you can dig around in the code here: https://static.diep.io/build_9b9e4489cd4...35.wasm.js

Thank you. I know some python and java, but this is ridiculous ! Could you or someone else help me make heads or tails of this?

First step would be to run it through an unminifier so you can see what's going on. Then look for anything that specifies drawing instructions. This excerpt would be a start:


But reverse-engineering some generic browser game that no-one will remember just to get a few circles and squares is seriously not worth your time.

That file might not even be the whole picture - I've not sifted through any of this in much detail. I think you'd be in over your head. Even Mr JavaScript Expert would take a while to make anything useful of it.

I guess your desired end result would be to get some SVGs out of it? I'm not sure if that would be possible, since canvas has raster results, but I suppose if it specifies stuff like "100px red circle with 5px border", you could manually perfectly recreate that in an SVG file, either with ye olde text editor or using software such as Inkscape.

(12-04-2018, 12:47 AM)Simpsons Dumper Wrote: [ -> ]First step would be to run it through an unminifier so you can see what's going on. Then look for anything that specifies drawing instructions. This excerpt would be a start:

Code:

(function($0, $1) {
       {
           cp5.contexts[$0].globalAlpha = $1
       }
   }), (function($0, $1, $2, $3) {
       {
           cp5.contexts[$0].fillStyle = cp5.patterns[$1];
           cp5.contexts[$0].fillRect(0, 0, $2, $3)
       }
   }), (function($0, $1, $2, $3, $4, $5) {
       {
           cp5.contexts[$0].drawImage(cp5.contexts[$1].canvas, $2, $3, $4, $5, 0, 0, 1, 1)
       }
   }), (function($0, $1) {
       {
           var img = cp5.images[$1];
           if (!img.isLoaded) return;
           if (img.width == 0 || img.height == 0) return;
           cp5.contexts[$0].drawImage(img, 0, 0, img.width, img.height, 0, 0, 1, 1)
       }
   }), (function() {
       {
           return allocateUTF8(textInput.value)
       }
   }), (function($0, $1, $2, $3) {
       {
           cp5.contexts[$0].arc(0, 0, 1, $1, $2, $3)
       }
   }), (function($0) {
       {
           cp5.contexts[$0].rect(0, 0, 1, 1)
       }
   }), (function($0, $1) {
       {
           var canvas = cp5.contexts[$1].canvas;
           cp5.contexts[$0].drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 1, 1)
       }
   }), (function($0) {
       {
           cp5.contexts[$0].strokeRect(0, 0, 1, 1)
       }
   })

But reverse-engineering some generic browser game that no-one will remember just to get a few circles and squares is seriously not worth your time.

That file might not even be the whole picture - I've not sifted through any of this in much detail. I think you'd be in over your head. Even Mr JavaScript Expert would take a while to make anything useful of it.

I guess your desired end result would be to get some SVGs out of it? I'm not sure if that would be possible, since canvas has raster results, but I suppose if it specifies stuff like "100px red circle with 5px border", you could manually perfectly recreate that in an SVG file, either with ye olde text editor or using software such as Inkscape.

Thanks. If I start this, I will probably be in over my head, so I won't try to rip those any time soon. Thank you Simpsons Dumper and Revistiv.