Users browsing this thread: 1 Guest(s)
Ripping from io games
#1
Music 
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!
Reply
Thanked by:
#2
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.
Reply
Thanked by:
#3
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:
Reply
Thanked by:
#4
(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 Ouch! , 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.

________________________________________________________________________________________________________________
Reply
Thanked by:
#5
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!
Reply
Thanked by: DemoCrew19
#6
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/.
Reply
#7
Thumbs Up 
(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?
Reply
Thanked by:
#8
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.
Reply
#9
(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)
Reply
Thanked by:
#10
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).
Reply
Thanked by:
#11
Thx. How would you do io games that don't work w/ the url fuzzer? (lets say... diep.io)
Reply
Thanked by:
#12
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
Reply
Thanked by:
#13
(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 ridiculousUnsure ! Could you or someone else help me make heads or tails of this?
Reply
Thanked by:
#14
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.
Reply
Thanked by: DemoCrew19
#15
Smile 
(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.  Smile
Reply
Thanked by:


Forum Jump: