Wallpaper Engine

Wallpaper Engine

Audio Scratchboard
 This topic has been pinned, so it's probably important
Squee  [developer] 30 Jan, 2017 @ 1:09pm
SVG Support Details/Explanation
First things first, do not make it too complex, the more there is the heavier things will be on the CPU.

Secondly, I am not sure how much I will extend this feature as the process as explained below ( starting with a b/w bitmap and creating an outline based on that ) is pretty straight forward and easy to get nice consistent results results.

Third, let me know if you have any questions :)

Accessing SVG Import
To access svg import you first have to enable "drawing" in the wallpaper settings. This will enable an on-screen menu. Once enable just hold your mouse down for 1 second on the wallpaper and a menu should appear, showing the import option.

LIMITED SVG support
The "Limited" part indicated the fact I only import paths from SVG, and have no support for circles, text, rectangle shapes, clippaths or more advanced SVG features. But dont worry, you can convert all those items to a path with a single menu option :)

Importing in the wallpaper
Hold mouse button down until menu appears and select import. Select your svg. Again, do not do something insanely crazy :)

Creating your own svg
You can easily draw with paths in Inkscape ( https://inkscape.org/ ), which will be the tool I will be using for everything in this topic.

If you want to use the text option, circle or other more 'advanced' svg elements, be sure to use the Menu -> Path -> Object To Path option to convert everything before saving for use in the wallpaper as they need to be paths. This is due to lack of support on my side. Also don't forget to keep a copy of your working version :)

Possible problems
First off, some svg stacks shapes on top of shapes, where the top most shape hides sections of the shape below it. The hidden parts will become visible when importing. So thats problem nr1.

When using someone else svg you might see lines going from one point to another that was not visible in inkscape. To fix that, when in inkscake, it often works to use "Path -> Break Apart" on that object.

You might also see items incorrectly positions. This is ( i believe ) due to object grouping ( I will try to get support for this but I wont proritize it ). In Inkscape you can ungroup it by selecting the object and using "Object -> Ungroup"


A sure way to get a nice result
For this we will need:
- Inkscape ( https://inkscape.org/ )
- A nice black and white image ( no grays ), with a simple but nice shape to trace. I have provided one in the wallpaper ( %steam%\steamapps\workshop\content\431960\850923796\svg-examples ) called rawr.png

If you have a nice comic style graphic with a black outline but is colored in ( or using grays ) look below this section on how to convert it to good black/white image with Gimp.

Importing the bitmap
  • Open Inkscape
  • Menu -> File -> Import
  • Select the black and white image ( for example rarw.png )
  • On the "bitmap image import" screen that pops up click OK

Image imported, lets create a vector graphic version of the bitmap.
  • Select the image if it was not automatically selected
  • Menu -> Path -> Trace Bitmap
  • In the "trace bitmap" dialog. Set 'Colors' to 2
  • In the "trace bitmap" dialog. Be sure 'stack scans' is checked.
  • Click OK. It will create the outline ( althought it might look like it didnt ) but not close the dialog, so close the dialog after you pressed OK

Now to get rid of the bitmap
  • Select the created shape ( its on top of the original bitmap ) and move it and remove the original image.
Now we only have the vector graphic left. One last thing and we can try to import it
  • Select the image
  • Menu -> Path -> Break Apart ( this will turn everything black but thats fine as we dont care about colors )
  • Menu-> File -> Save

Additionally:
  • With everything still selected, go to color options ( ctrl + shift + f ) and disable fill, and enable stroke. this will make it look nice in the svg too :)
  • Save if you need to.

Colored bitmap with black outlines to B/W image
If you have a comic style image, with thick black outlines and just want to convert all all other colors to white. This can easily be done with gimp ( or photoshop if you are rich )

For Gimp:
  • Load the image up
  • Desaturate the image. In gimp its Menu -> Color -> Desaturate
  • Adjust the color value/brightness curve. In gimp I use Menu -> Color -> Curve and adjust the curve until everything is white except that black outline.
  • Save

For photoshop:
Using the Threshold adjustment found in the adjustments layers or Image -> Adjustments -> Threshold is perfect for making pretty much any image into complete black and white (no greys at all).

A source for images:
This is a search for black & white decals on google.
https://www.google.com/search?q=decals&tbm=isch&tbs=ic:gray
Last edited by Squee; 11 Apr, 2017 @ 10:27am
< >
Showing 1-15 of 20 comments
Rhy 1 Feb, 2017 @ 5:03am 
So, i did follow every step until the "Break apart" one. that option only turns a minority of the picture black. almost nothing.

I tried to put it in without the break point. it works flawlessly, except that i got 2 audio lines. above and below the black line.
Last edited by Rhy; 1 Feb, 2017 @ 5:05am
Squee  [developer] 1 Feb, 2017 @ 5:04am 
It depends :) It doesn't have to turn it black. Was more just a notice that it might happen and it should not be a problem if it does.

The turning black is a result of the "holes" in the vector being seperated from it, and when that happens they get black as fill color assigned to them.
Last edited by Squee; 1 Feb, 2017 @ 5:06am
Squee  [developer] 1 Feb, 2017 @ 5:11am 
Originally posted by Ass Pancakes ||||| Blw.tf:
I tried to put it in without the break point. it works flawlessly, except that i got 2 audio lines. above and below the black line.
If you mean above/below a blackline you were tracing that is probably correct, as you are tracing the edges and a black line has an edge on each side.

If its a buggy line, give me a screenshot :D

And if you want I can try to make the SVG. I might of missed something with my own test examples.


Last edited by Squee; 1 Feb, 2017 @ 5:37am
Rhy 1 Feb, 2017 @ 7:59am 
Works pretty well after you try some times http://i1164.photobucket.com/albums/q580/timolampert/Unbenannt_zpsbypnxqry.png

Would be nice to add an option to adjust the background image so i can fit the audio lines onto the picture.
Squee  [developer] 1 Feb, 2017 @ 8:14am 
Looks nice .. I was looking into getting a more even distribution so that all generated paths would have about the same density of those small lines making them seem better distributed. But was met with some bugs that I still have to resolve. For now that can be resolved by breaking the long lines in two ..

Can't you adjust the lines onto the picture using size and position options in settings? ( just asking to try and understand what you want differently )
Last edited by Squee; 1 Feb, 2017 @ 8:14am
Rhy 1 Feb, 2017 @ 8:47am 
Originally posted by Squee:
Looks nice .. I was looking into getting a more even distribution so that all generated paths would have about the same density of those small lines making them seem better distributed. But was met with some bugs that I still have to resolve. For now that can be resolved by breaking the long lines in two ..

Can't you adjust the lines onto the picture using size and position options in settings? ( just asking to try and understand what you want differently )
Yes, but the image sometimes seems to stretch incorrectly(like it stretches the image too far out of the display)
Squee  [developer] 1 Feb, 2017 @ 8:52am 
Bubbles haha :) Great! :steamhappy:

The background should scale in all directions the same, but I will double check. But it stretches to make sure there are no black bars on screen. I could add the "fit" option I had in the VU meter, but then you have the chance of having black bars.
Rhy 1 Feb, 2017 @ 9:06am 
Well, it's not too urgent. I just edit stuff in gimp and that works somehow.
Last edited by Rhy; 1 Feb, 2017 @ 9:06am
Squee  [developer] 1 Feb, 2017 @ 1:44pm 
Nice, I can moderate the moderators delete post! Respect my authoritah! :guard:

Pancakes, check the update that should be coming soon. I managed to get my code to work that rebalances the "detail" based on the path/segment length. Should give a much more evenly distributed visual now, and not that short lines are a lot brighter than the long ones :)
Rhy 1 Feb, 2017 @ 1:58pm 
Originally posted by Squee:
Nice, I can moderate the moderators delete post! Respect my authoritah! :guard:

Pancakes, check the update that should be coming soon. I managed to get my code to work that rebalances the "detail" based on the path/segment length. Should give a much more evenly distributed visual now, and not that short lines are a lot brighter than the long ones :)
Looking forward to try it tomorrow!



Steam is giving me trust issues.
superBlast 10 Apr, 2017 @ 5:00pm 
I think it maybe helpful to add that with using Photoshop using the Threshold adjustment found in the adjustments layers or Image -> Adjustments -> Threshold is perfect for making pretty much any image into complete black and white (no greys at all). It's what I used to make the two anime SVGs I posted in the other thread before I got to Inkscape steps.

Dunno if GIMP has something like that as I don't use it lol.
Squee  [developer] 10 Apr, 2017 @ 5:24pm 
I will add that suggestion tomorrow. Gimp does have something like that I think, but I am no designer/graphics expert and went with the route I know/prefer :)

besides, I thought illustrator was for vectors ( just shows what I know ).

superBlast 10 Apr, 2017 @ 6:45pm 
I wouldn't know. I use Photoshop only. Haven't touched anything else in that big Adobe lineup. I'm no expert either XD I just like to mess around in photoshop.
Last edited by superBlast; 10 Apr, 2017 @ 6:46pm
Squee  [developer] 11 Apr, 2017 @ 10:29am 
Doh, it was late ( or early depending on how ya look at it ) .. I mixed up a few things and for some reason I was thinking you were working on the SVG ( because i mixed up your touched it up in phothoshop comment from the other thread and for some reason had it in my head that you were editing the svg, not the bitmap ) lol .. I need to stop replying when its late ..
< >
Showing 1-15 of 20 comments
Per page: 1530 50