Community Member•2/1/2025, 5:04:39 AM
Here is an example of what I would like to set up for the game Taiko no Tatsujin. I know I could probably set up the heart as a static image, but I would really like it to pulse!
Community Member•2/1/2025, 5:05:19 AM
For reference, I am using a samsung watch and a windows PC.
I have the app already set up and love using it, I just want to push the customizability.
Community Member•2/1/2025, 5:07:49 AM
I also considered setting up a way for each glyph to be an image, so you could have very wild numbers instead of just flat colored fonts/with outlines. That part might be way too much though
Community Member•2/1/2025, 5:11:01 AM
Ideally I was really hoping the widget configurator had these options, because you can change the heart to the branded one! I get losing CSS customizability if its an image, but it was on my mind
Community Member•2/2/2025, 12:43:01 AM
if i find some time 2morrow - i can build you this if you wish - so i would animate the heart within the circle to pulse - the font should be managable on your own?
Community Member•2/2/2025, 12:45:20 AM
Taiko is a drum game, so I put the heart on a "drum" and I wanted it to pulse just like the normal animations in most widgets.
I guess what I want is to link to an image, and have that entire image pulse.
For the fonts, I just need to learn how to add an outline and I think I'll be good. All I know how to do is change the base color at the moment and even then that's using the widget configurator so I gotta learn some more.
Community Member•2/2/2025, 12:45:58 AM
If I could customize the heart image and figure out how to customize the fonts further I'd be set, I could probably even share my designs in here for people to use
Community Member•2/2/2025, 12:46:21 AM
What you mean by that "Taiko is a drum game, so I put the heart on a "drum" "?
Community Member•2/2/2025, 12:47:47 AM
Oh. The circle shape is how the drum icons look in the game, so the idea is the drum is beating. That's why I want the whole circle to pulse/animate
Community Member•2/2/2025, 12:48:25 AM
ah okay - so this should pulse, right?
Community Member•2/2/2025, 12:49:27 AM
Yes! If you want in a bit I can send the asset for you to mess with but genuinely any image will work.
In the end I want to be able to link to whatever image I want, be it on my machine locally or a URL on the web
Community Member•2/2/2025, 12:49:44 AM
yeah sure send the asset
Community Member•2/2/2025, 12:50:19 AM
I'll do it when I get to my pc, should be about an hour or longer. Sorry if that's a long time I'm out right now
Community Member•2/2/2025, 12:50:25 AM
I appreciate your help
Community Member•2/2/2025, 12:51:04 AM
Out of curiosity is this going to be done using custom CSS in OBS or is it going to be done by making a new html file using an API key?
Community Member•2/2/2025, 12:53:14 AM
i gonna do the animation in After Effects and will export it as a webm file - which you can use in OBS instead of the normal heart animation
Community Member•2/2/2025, 12:54:21 AM
Ooh okay, that makes so much sense actually. So the heart is going to be totally separate from Hyperate. Hyperate will only handle the numbers
Community Member•2/2/2025, 12:54:50 AM
exactly
Community Member•2/2/2025, 12:55:17 AM
I never considered just turning it into an animated image and having it next to the number
Community Member•2/2/2025, 12:56:00 AM
Thank you so much, that helps a lot. How about the font though? Is there a way to add outlines to text through custom css?
Community Member•2/2/2025, 12:56:40 AM
im pretty sure this is doable - just give me a sec - will test it in OBS with CSS.......
Community Member•2/2/2025, 12:59:37 AM
```css
body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
color: white; /* Main text color */
font-size: 24px; /* Adjust as needed */
font-weight: bold; /* Ensures better visibility */
-webkit-text-stroke: 2px red; /* Red outline */
}```
Community Member•2/2/2025, 12:59:43 AM
yeah this works for me
Community Member•2/2/2025, 1:01:24 AM
when you can provide me the font name i can ad this as well
Community Member•2/2/2025, 1:03:13 AM
Oh snap, that was fast. Thanks again!!
Community Member•2/2/2025, 1:03:22 AM
I'll test this when I get to my pc and let you know how it goes
Community Member•2/2/2025, 1:03:41 AM
The font name is in Japanese so I don't remember it atm haha
Community Member•2/2/2025, 1:27:11 AM
here we go. - do not foregt to activate "loop" within the source 😉
Community Member•2/2/2025, 2:12:11 AM
That's awesome!!
Community Member•2/2/2025, 2:12:51 AM
I'll see if i can replicate this soon
Community Member•2/2/2025, 2:13:05 AM
Because then I can make a template for myself
Community Member•2/2/2025, 2:13:14 AM
just give me a ping if you need further assistance 😉
Community Member•2/2/2025, 2:13:27 AM
You got it. Cheers!
Community Member•2/2/2025, 4:30:04 AM
<@186881714381914112> Hey there, so far the custom CSS works great! I wonder if it's possible to make the stroke appear on the inside or outside of the number? The way it is set up now, it shows up in the center of the path that makes up the number.
Community Member•2/2/2025, 4:30:30 AM
I thought about maybe using a text shadow effect instead but I am not sure how to set it up
