Problems with decals appearing correctly in the game

[zardoz9]

I'm trying to understand why some of my decals do not translate well in the game. I'm using the latest version of Affinity Designer, and I'm still in the learning stage.

Many times after successfully uploading a decal to the decal uploader, certain shapes in the decal do not appear right when viewed in the game library. For example, sometimes circles are offset to the side, sometimes not appearing at all, sometimes it appears correctly. This is driving me crazy and I have no idea what's going on.

Note that in the decal uploader from gran-turismo.com, my decals always look fine, just not always in the game. I've tried the SVGOMG site, tried constructing the decal in various other ways, but to no avail.

What am I doing wrong? Has anyone else experienced this and if so, is there a solution?

 

[BLiTZ]

This has been covered a few times already in the main creating SVG's thread so have a good read through it if you haven' already.

The long and short of it is usually down where the shapes are placed on the document page, how those shapes have been made and certain export settings.

If you want to post some examples in screen shots or link to faulty decals on your GT profile I'm sure we can advise where you're going wrong.

 

[zardoz9]

This has been covered a few times already in the main creating SVG's thread so have a good read through it if you haven' already.

The long and short of it is usually down where the shapes are placed on the document page, how those shapes have been made and certain export settings.

If you want to post some examples in screen shots or link to faulty decals on your GT profile I'm sure we can advise where you're going wrong.

I went through the SVG thread but didn't find an answer. I don't know how to upload an image here but I can explain it with as simple an example as I can:

I created a simple black circle and created another smaller black circle in the middle. I then subtracted the smaller circle from the larger circle, leaving a donut shape. I exported the image with the default settings that came with Affinity Designer. When I upload it, the image appears correct on the upload web page, but in the game it's just a black circle.

 

[Nuschel01]

I don't know how to upload an image here

 

[zardoz9]

Thanks Nuschel01 for taking the time to explain to me what should have been obvious to me.

So here is the example decal that was correctly uploaded to the uploader web page:

Here is how the decal appears in my library:

What am I doing wrong?

 

[BLiTZ]

Sounds like an issue with Affinity designer not creating compliant compound shapes. I don't use it myself so can't really comment further, and the chances are the solution may not be an easy one.

 

[MatskiMonk]

I went through the SVG thread but didn't find an answer. I don't know how to upload an image here but I can explain it with as simple an example as I can:

I created a simple black circle and created another smaller black circle in the middle. I then subtracted the smaller circle from the larger circle, leaving a donut shape. I exported the image with the default settings that came with Affinity Designer. When I upload it, the image appears correct on the upload web page, but in the game it's just a black circle.

The issue here comes from the operation where you subtract the small circle from the big one. It works in your browser because your browser is more tolerant to the way fills are coded in SVG files. GT's built in SVG to bitmap convertor is not as lenient, and that's why it's different in game.

I don't know affinity well enough to tell you how to fix this, but it's caused because of fill-rules**.

Before you do the subtract, convert both the circle shapes to curves/lines. See if that works... if not try it again but find the option to 'reverse' the inside curve/circle, and then do the subtract.

Failing that, my work around is as follows:
Do the subtraction as normal, then draw a very narrow rectangle across from the inside to the outside, now subtract that too - you'll be left with a C shape. Zoom in and drag the nodes that form the end of the C together and it'll work everytime (just not if you're using a stroke )

Like this...

Spoiler: example

**If you draw two circles, the lines are treated as paths that go clockwise... that's the default way its done. When you subtract them, the inner and outer paths both still run clockwise. The fact it's clockwise matters because when SVG is being rendered it counts how many paths it crosses in each direction to figure out if it's on the inside of a shape, or the outside - and obviously it will only fill insides.

 

[zardoz9]

Before you do the subtract, convert both the circle shapes to curves/lines. See if that works... if not try it again but find the option to 'reverse' the inside curve/circle, and then do the subtract.

Failing that, my work around is as follows:
Do the subtraction as normal, then draw a very narrow rectangle across from the inside to the outside, now subtract that too - you'll be left with a C shape. Zoom in and drag the nodes that form the end of the C together and it'll work everytime (just not if you're using a stroke )

Failing that, my work around is as follows:
Do the subtraction as normal, then draw a very narrow rectangle across from the inside to the outside, now subtract that too - you'll be left with a C shape. Zoom in and drag the nodes that form the end of the C together and it'll work everytime (just not if you're using a stroke )

**If you draw two circles, the lines are treated as paths that go clockwise... that's the default way its done. When you subtract them, the inner and outer paths both still run clockwise. The fact it's clockwise matters because when SVG is being rendered it counts how many paths it crosses in each direction to figure out if it's on the inside of a shape, or the outside - and obviously it will only fill insides.

Thanks for your suggestions. The circles are already curves and I've already tried reversing the circle subtraction. I even tried combining the circles instead of subtracting (which worked for another person using Affinity using the same example that I gave, but not for me).

Although the method you suggest using a very narrow rectangle might work for simple circles, it would be impractical for a decal using several irregular shapes.

I don't know what you mean by treating the paths that go clockwise. I used the circle tool by just dragging the circles onto the screen. I have no idea what is clockwise or counterclockwise.

Affinity Designer is a very popular app and people are using it successfully in GTS. Surely there is a simple solution. I just don't know what it is.

 

[MatskiMonk]

Although the method you suggest using a very narrow rectangle might work for simple circles, it would be impractical for a decal using several irregular shapes.

It actually works for any shape, I've done it that way quite often - I gave a simple example to demonstrate the principle - if the middle bit is joined to the area outside of the shape, it forces it to work...

Spoiler: Example

I don't know what you mean by treating the paths that go clockwise. I used the circle tool by just dragging the circles onto the screen. I have no idea what is clockwise or counterclockwise.

This is to do with how it's coded, so you shouldn't have to worry about it - but for some reason the game doesn't execute things as it should. I understand the theory behind the SVG code (a bit), but I've no idea how to apply it to Affinity, and its difficult to test because of inconsistencies in the way GTS works.

You're right though, there are people here who use it... I think @syntex123 does... maybe he can help.

 

[zardoz9]

It actually works for any shape, I've done it that way quite often - I gave a simple example to demonstrate the principle - if the middle bit is joined to the area outside of the shape, it forces it to work...

Spoiler: Example

View attachment 732445

Ok, I tried creating a narrow rectangle between the two circles and then subtracted it. It still doesn't work. However, that is only one of the problems. Sometimes objects are not where they should be. For example:

Note there are multiple white circles at the corners of the squares. Here's what happens when viewed in GTS:

Not only are seven of the white circles out of position, the rest of the circles are missing (unless they are behind the black squares)!

 

[BLiTZ]

It's almost as though the shapes have been placed using transforms (ie instead of the code showing their true position, it shows position relative to their original location - so if you created the shapes to the left then moved them, it's coded as X% to the right of the origin).

GT Sport doesn't like transforms (hence why complicated gradients have to be hand coded as most software uses transforms to adapt a simple linear gradient to the required size and angle).

 

[MatskiMonk]

I've downloaded the Affinity trial to see how it works and what kind of SVG it writes.

I've created a few test files which seem to have uploaded properly, but I can't get to my PS4 for a few hours to check the results.

Based purely on reading the XML and looking at your screen shots @zardoz9, I would recommend two things though;

1) Select your drawing before you go to file > export, then in your export options set the area to "Selection without Background". It looks like you exporting the whole page, which makes your decal smaller in the game. This shouldn't matter with vectors but because of how GTSport renders them this can mean you end up with a worse quality decal when you put it on the car.

2) Also, in the export dialogue box, click More... then tick Flatten Transforms, Use hex colours and Export text as curves. 'Flatten transforms' looks like it addresses the problem @BLiTZ mentioned above (to a degree), which may or may not solve your problem... ticking the other two will just give you less problems or smaller code in future

 

[zardoz9]

I've downloaded the Affinity trial to see how it works and what kind of SVG it writes...

Thanks for taking the time to investigate this problem! Indeed your Export Settings worked for my second example, the Scintillating Grid. It not only fixed the offset circles but it reduced the file size so that I didn't have to use SVGOMG. Fantastic.

It never occurred to me that I had to select the drawing in order to change the "selection without background" (it was always dimmed before).

Unfortunately, it did not cure the donut problem. It still appears as a single black circle. However, I'm sure there's a simple solution there somewhere.

 

[MatskiMonk]

Thanks for taking the time to investigate this problem! Indeed your Export Settings worked for my second example, the Scintillating Grid. It not only fixed the offset circles but it reduced the file size so that I didn't have to use SVGOMG. Fantastic.

It never occurred to me that I had to select the drawing in order to change the "selection without background" (it was always dimmed before).

Unfortunately, it did not cure the donut problem. It still appears as a single black circle. However, I'm sure there's a simple solution there somewhere.

Glad to help.

I'll post later if I get anywhere with the doughnut issue.

 

[BLiTZ]

With the donut issue, have you tried the reversing direction technique? If so make sure to reverse the direction of the smaller shape only before you combine it with the other. I've crudely illustrated what @MatskiMonk was trying to explain above:

You need to have the two shapes apposing each other for the computer to properly recognise them separately. if you reverse the whole donut it wont work.

Also, I know some of the more modern vector packages use non-destructive combined shapes, in the older stuff, like Illustrator and FreeHand (damn I miss FreeHand!) once you join a shape or punch a hole in it it's no longer a shape (IE it goes from being a rectangle or a ellipse into a path) and you can't retrieve any original attributes, but in the newer software they use clipping masks and other tricks so you can unlock them and change the various shapes separately. I think they have options to convert the combined mish mash of shapes into a proper path, but even then you may have to jigger about with directions and the like as I've found when playing about with Gravit.

 

[zardoz9]

With the donut issue, have you tried the reversing direction technique? If so make sure to reverse the direction of the smaller shape only before you combine it with the other. I've crudely illustrated what @MatskiMonk was trying to explain above:
View attachment 732642
You need to have the two shapes apposing each other for the computer to properly recognise them separately. if you reverse the whole donut it wont work.

I wasn't sure what was meant by reversing the direction because there's nothing indicating direction so I took a guess and flipped the inner circle horizontally. It worked! I now can make donuts.

Thanks so much for your help!

 

[MatskiMonk]

I wasn't sure what was meant by reversing the direction because there's nothing indicating direction so I took a guess and flipped the inner circle horizontally. It worked! I now can make donuts.

Thanks so much for your help!

That's not quite what I meant, but if it works.. it works!

FYI, this is what I meant...

Highlight the nodes for the inner cirlce, then click the icon..

... might work .. might not.

 

[zardoz9]

That's not quite what I meant, but if it works.. it works!

FYI, this is what I meant...

Yes, that worked too. Although when I select the reverse tool, nothing on screen happens indicating the tool worked, but it did nevertheless. And I guess it doesn't matter which circle I reverse, right?

 

[MatskiMonk]

Yes, that worked too. Although when I select the reverse tool, nothing on screen happens indicating the tool worked, but it did nevertheless. And I guess it doesn't matter which circle I reverse, right?

No, nothing changes and I can't see any options or menus that indicate which way it is. Glad it worked though.

It shouldn't matter which way, as long as one is reversed ---- it might end up mattering, but only because of GTS's "nuances". Despite knowing how it should work I've often had to resort to my workaround above.

 

[zardoz9]

After experimenting with Affinity Designer a little longer and with the help and information I received from MatskiMonk, BLiTZ and syntex123, this is, perhaps, the simplest approach to creating shapes that use subtractions in Affinity:

First create an outer shape (circle, square, or whatever) and then covert it to curves and then use the Reverse Curves Tools to change the direction (per MatskiMonk's suggestion). (Make sure when you create your outer shape that you don't move it before converting and reversing the direction. For some reason, if you move the shape, the Reverse Curves Tool does not appear.) Alternatively, if your outer shape is symmetrical (like a circle) you can reverse direction by simply flipping it using the Flip Horizontal, or Flip Vertical tool.

Now when you create your inner shapes, draw your shapes always in the opposite direction of your outer shape. Unfortunately, Affinity doesn't show you which direction the shapes are in so I experimented with all the shape tools and came up with a list of which shapes are made clockwise or counterclockwise:

Here are the direction of shapes in Affinity Designer:

CLOCKWISE DIRECTION TOOLS:

Ellipse Tool
Rounded Rectangle Tool
Diamond Tool
Star Tool
Heart Tool
Double Star Tool
Cloud Tool
Donut Tool (?)*

COUNTER-CLOCKWISE TOOLS:

Triangle Tool
Rectangle Tool
Trapezoid Tool
Polygon Tool
Square Star Tool
Crescent Tool
Cog Tool
Arrow Tool
Pie Tool
Segment Tool
Callout Rounded Rectangle Tool
Callout Elipse Tool
Tear Tool

* Note the Donut Tool contains 2 circles and both circles are constructed in the same direction which makes the Donut Tool (when it is a closed donut) useless in GTS because it will appear as a solid circle.


Note also that creating a shape by dragging from the upper left to the bottom right produces the same shape direction as from dragging from the bottom right to the upper left (or from any direction).

When all the inner shapes are all the opposite direction from the outer shape and you export it in SVG format, everything should show up ok in GTS.

If anyone has a simpler approach (hopefully something in the settings that can make everything work without changing shape directions) let us know.