Topic-Free Mega Thread - v 1.11.2020

GPUnity · November 23, 2020, 11:54am

I believe i fixed it? But it also seems like it doesn’t take the stroke/border into account, and i’d guess any filters. I’d have to stick to text and blocks of colour. This is the SK logo btw. @Kaldaien let me know if this is what you’re looking for, if so then i can get the achievement skin sorted.

CSS example

@charset “utf-8”;
.st0
{
background : #6D6D6D;
background : rgba(109, 109, 109, 1);
position : absolute ;
left : 0px;
top : 512px;
width : 170px;
height : 170px;
}
.st1
{
background : #141414;
background : rgba(20, 20, 20, 1);
position : absolute ;
left : 682px;
top : 853px;
width : 170px;
height : 170px;
}
.st2
{
background : #282828;
background : rgba(40, 40, 40, 1);
position : absolute ;
left : 0px;
top : 0px;
width : 170px;
height : 170px;
}
.st3
{
background : #6D6D6D;
background : rgba(109, 109, 109, 1);
position : absolute ;
left : 170px;
top : 341px;
width : 170px;
height : 170px;
}
.st4
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 341px;
top : 853px;
width : 170px;
height : 170px;
}
.st5
{
background : #282828;
background : rgba(40, 40, 40, 1);
position : absolute ;
left : 682px;
top : 682px;
width : 170px;
height : 170px;
}
.st6
{
background : #6D6D6D;
background : rgba(109, 109, 109, 1);
position : absolute ;
left : 341px;
top : 512px;
width : 170px;
height : 170px;
}
.st7
{
background : #282828;
background : rgba(40, 40, 40, 1);
position : absolute ;
left : 853px;
top : 512px;
width : 170px;
height : 170px;
}
.st8
{
background : #515151;
background : rgba(81, 81, 81, 1);
position : absolute ;
left : 341px;
top : 341px;
width : 170px;
height : 170px;
}
.st9
{
background : #141414;
background : rgba(20, 20, 20, 1);
position : absolute ;
left : 853px;
top : 341px;
width : 170px;
height : 170px;
}
.st10
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 682px;
top : 512px;
width : 170px;
height : 170px;
}
.st11
{
background : #0A0A0A;
background : rgba(10, 10, 10, 1);
position : absolute ;
left : 853px;
top : 170px;
width : 170px;
height : 170px;
}
.st12
{
background : #8C8C8C;
background : rgba(140, 140, 140, 1);
position : absolute ;
left : 170px;
top : 512px;
width : 170px;
height : 170px;
}
.st13
{
background : #282828;
background : rgba(40, 40, 40, 1);
position : absolute ;
left : 682px;
top : 341px;
width : 170px;
height : 170px;
}
.st14
{
background : #282828;
background : rgba(40, 40, 40, 1);
position : absolute ;
left : 512px;
top : 853px;
width : 170px;
height : 170px;
}
.st15
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 0px;
top : 853px;
width : 170px;
height : 170px;
}
.st16
{
background : #141414;
background : rgba(20, 20, 20, 1);
position : absolute ;
left : 853px;
top : 682px;
width : 170px;
height : 170px;
}
.st17
{
background : #515151;
background : rgba(81, 81, 81, 1);
position : absolute ;
left : 170px;
top : 170px;
width : 170px;
height : 170px;
}
.st18
{
background : #515151;
background : rgba(81, 81, 81, 1);
position : absolute ;
left : 0px;
top : 682px;
width : 170px;
height : 170px;
}
.st19
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 512px;
top : 341px;
width : 170px;
height : 170px;
}
.st20
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 512px;
top : 682px;
width : 170px;
height : 170px;
}
.st21
{
opacity : 0.51;
position : absolute ;
left : 0px;
top : 0px;
width : 1023px;
height : 1023px;
filter: alpha(opacity=51) progid:DXImageTransform.Microsoft.Alpha(opacity=51) ;
}
.st22
{
background : #000000;
background : rgba(0, 0, 0, 1);
position : absolute ;
left : 853px;
top : 0px;
width : 170px;
height : 170px;
}
.st23
{
background : #515151;
background : rgba(81, 81, 81, 1);
position : absolute ;
left : 170px;
top : 853px;
width : 170px;
height : 170px;
}
.st24
{
background : #0A0A0A;
background : rgba(10, 10, 10, 1);
position : absolute ;
left : 682px;
top : 0px;
width : 170px;
height : 170px;
}
.st25
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 170px;
top : 0px;
width : 170px;
height : 170px;
}
.st26
{
background : #141414;
background : rgba(20, 20, 20, 1);
position : absolute ;
left : 512px;
top : 0px;
width : 170px;
height : 170px;
}
.st27
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 341px;
top : 170px;
width : 170px;
height : 170px;
}
.st28
{
background : #3D3D3D;
background : rgba(61, 61, 61, 1);
position : absolute ;
left : 0px;
top : 170px;
width : 170px;
height : 170px;
}
.st29
{
background : #515151;
background : rgba(81, 81, 81, 1);
position : absolute ;
left : 512px;
top : 512px;
width : 170px;
height : 170px;
}
.st30
{
background : #6D6D6D;
background : rgba(109, 109, 109, 1);
position : absolute ;
left : 170px;
top : 682px;
width : 170px;
height : 170px;
}
.st31
{
background : #282828;
background : rgba(40, 40, 40, 1);
position : absolute ;
left : 341px;
top : 0px;
width : 170px;
height : 170px;
}
.st32
{
background : #0A0A0A;
background : rgba(10, 10, 10, 1);
position : absolute ;
left : 853px;
top : 853px;
width : 170px;
height : 170px;
}
.st33
{
background : #141414;
background : rgba(20, 20, 20, 1);
position : absolute ;
left : 682px;
top : 170px;
width : 170px;
height : 170px;
}
.st34
{
background : #282828;
background : rgba(40, 40, 40, 1);
position : absolute ;
left : 512px;
top : 170px;
width : 170px;
height : 170px;
}
.st35
{
background : #515151;
background : rgba(81, 81, 81, 1);
position : absolute ;
left : 0px;
top : 341px;
width : 170px;
height : 170px;
}
.st36
{
background : #515151;
background : rgba(81, 81, 81, 1);
position : absolute ;
left : 341px;
top : 682px;
width : 170px;
height : 170px;
}
.NormalCharacterStyle
{
font-family : Segoe UI Emoji;
font-size : 750px;
line-height : 0.1px;
letter-spacing : 14.25px;
color : #EDEDED;
color : rgb(237, 237, 237);
}

Kaldaien · November 23, 2020, 12:01pm

That’s possibly what I’m looking for… though there are enough parameters in that CSS to make nobody ever want to customize that, lol.

I’m not much of a web programmer, I just know that if I used CEF for rendering, then CSS is how you go about making styles configurable by users.

GPUnity · November 23, 2020, 12:03pm

Yeah that’s only as big as it is because i just exported the SK logo, which has a lot of individual blocks. The actual achievement skin will probably be less than a third of the length.

Kaldaien · November 23, 2020, 12:03pm

There’s that too… I’m more interested in using it to render SK’s Wiki in-game without relying on the Steam overlay. That whole chapter where I had a strong reliance on Steam overlay stuff to make life convenient kind of has to end.

Depending on the speed of the D3D11 shared surfaces, I could also potentially introduce a little in-game floating YouTube widget Play video walkthroughs from within the game without the awkwardness of the Steam overlay.

Kaldaien · November 23, 2020, 12:04pm

Ah, okay. That could be practical then

Kaldaien · November 23, 2020, 12:07pm

Believe me, nobody knows more than I do the memory footprint (and IPC overhead) of CEF I think if anyone’s obsessed enough with this stuff to find places to trim the excess fat and make it as lightweight as possible, you’re looking at him

Kaldaien · November 23, 2020, 12:10pm

You know, something seems missing from the Wiki…

Was there ever a section discussing the [Import.*] INI section for loading plug-in DLLs? It’d be handy right now to point a user directly to said info, but it doesn’t appear to exist.

Yeah, Steam Community :: Guide :: An Unofficial Guide to Special K

The PlugIns / Other section documents it, but not PCGaming Wiki or SK Wiki

GPUnity · November 23, 2020, 12:17pm

Are custom achievements only going to work for Steam btw? I’m looking at this rarity system here, and wondering if it can still be implemented (and ig the global and friends stats)

Aemony · November 23, 2020, 3:31pm

I can add it to the Tools K page soon.

Aemony · November 23, 2020, 3:37pm

CSS is just styling various HTML elements. Implementing the actual achievement popup in CEF will required some minor things:

The necessary underlying HTML structure that makes up the various individual elements.
The CSS styles for the various elements which controls their overall styling (e.g. background image, background color, position, font family, font size, etc).

The actual achievement popup should be, all things considered, rather easy to convert to the necessary HTML and CSS structure.

Again though – you can’t really have CSS without HTML; they go hand in hand.

Aemony · November 23, 2020, 4:12pm

Here is a simple design that mirrors the achievement example provided by GPUnity using a couple of HTML elements as well as accompanied percentage-wise scaling and styling on them.

tmp.zip (959 Bytes)

What’s missing is basically more detailed element styling along with the background-images (the various symbols used) and a background gradient for the rarity box.

The text of each box would be populated through the HTML element itself, while the achievement icon and possibly rarity gradient would be populated by applying a custom background style on the icon and rarity objects respectively.

How one does that through CEF, I don’t know, but it should technically just be to access the HTML element and change its innerHTML property (holds the contents of the HTML element) and the style property (holds inline CSS styling) respectively.

Rarity could also be set by adding a new CSS class to the div#rarity HTML element, and then controlled through the style.css styling. E.g. adding the .legendary class to the div element would style it using the .legendary CSS class which was defined as e.g. background-color: blue or whatever.

GPUnity · November 23, 2020, 4:20pm

@Kaldaien I’ll message you all the stuff soon. Here’s what i was going for regarding the rarity system:

I don’t know if you can implement this, but i think something like this could work. You can scale the gradient length depending on how rare a global achievement is, can probably be adjusted by player as well to set say 0-10% rarity=legendary.

edit: i’ve DM’d everything to your discord acc

Aemony · November 23, 2020, 4:26pm

If the rarity is implemented through editable CSS classes then it should be easy to customize as long as the user is willing to do so through the CSS file itself. It would basically just need changing the relevant background CSS property of the relevant rarity CSS class.

All SK itself would do would be to add the appropriate CSS class to the HTML div#rare element.

Aemony · November 23, 2020, 4:32pm

Custom Plugin section is up on the Tools page: Tools | Special K - The Official Wiki

Aemony · November 23, 2020, 5:07pm

On another note, gah, the wait is killing me… I picked a Tobii Eye Tracker 5 up (seems to have improved eye tracking compared to the last version, along with head tracking!) and picked AC:Valhalla as the free game but they use a damn weird setup…

Instead of sending me the key or so, I needed to wait for the device to arrive, connect it to the PC, set it up, and /then/ wait another 6 hours before the redeem key might unlock/appear in the Tobii Experience app…

Kaldaien · November 23, 2020, 5:53pm

Flaky as @#$%, especially if any overlays peek their head into the game, but I got HDR working in Control DX12 + RTX.

someone_for · November 23, 2020, 8:12pm

Impressive what you’ve been pulling off lately

JDSP · November 23, 2020, 9:03pm

getting close to the dream of playing Detroit Become Human in HDR

Ahmlet · November 23, 2020, 9:36pm

Nice, is the dx12 SK test build recommended for valhalla?

Kaldaien · November 23, 2020, 10:06pm

No