#Sprites In Css

[dseval]

Hello audience. Unfortunately, I am still on my break. However, I am happy to announce that I am still alive and kicking. In fact, I decided to make use of my unemployment and revisit HTML, CSS, and JavaScript to create... A visual novel.

Good News: code is 100% reusable because I used a JSON (i do not know how that works, someone can kindly explain to me...)

Bad News: this code sucks ass, and NOTHING works except playing the story. Transitions? Doesn't work. UI/UX? Ass. Effects? Hell no... Also, 70% of the features aren't present yet I'm gonna do it later.

Oh, this is CrossDust, if you can't tell.

Dust Sans by Ask-Dusttale, Cross Sans by Jakei

I'm gonna respond to asks and do requests later (After my break is over). This is just a small update teehee.

[nuxill]

I made a thing that took way too much time but heres a proof of concept

Not... Technically art but i think my coding adventures can go here. Eventually id like to make my own sprites or something

[tsubasaclones]

We’re doing html in this class for a short period and it made me think of my own personal html nightmare site and I realized it’s only the home page that looks awful on my phone. Everything else seems to resize itself. How did I manage that

[luxidoptera]

so I just learned that the Coliseum enemy sprites in the Game Database are handled in the funniest possible way I've ever seen:

they didn't just like, assemble the spritesheet into a gif and then export that raw, which would explain some of the very noticeable jank-

it's just the spritesheet. manually animated through css.

they are changing the position of the image every frame.

the more i think about this the funnier it gets. i am wheeze laughing

(btw, here's a gif of the Alstroemeria Fox that i made by just popping the spritesheet into Aseprite just to see if I'd need to adjust anything, and i didn't, which i think is the funniest part)

[pinkbat5]

Greetings, greetings. I've been reading through corru.observer and I really love it! Got inspirired to draw my own little obesk guy. Which, As I went, got me curious about your art process for some of these visuals. What resolution are the sprites? And, what kind of dithering are you using to get such striking visuals? I'm quite curious

Hi!! I'm glad you like it!!!!

The signatures are around 1840-2300ish pixels tall at their full resolution! Though that doesn't decide how tall they are in the game, that's determined by the size of their css container. To keep heights consistent, whenever I make a new signature, I just paste in one of the signatures I already made for reference, then resize the sketch accordingly. like this

So for making your own, I recommend ripping the sprites from the game and doing the same.

After resizing the sketch I draw the shapes with a hard, aliased brush, then I paint on top of them with simple round brushes. Then sometimes I add textures on top of that on an overlay or multiply blending mode.

As for dithering, I cover that here, but to summarize I (and all of corru observer, save for... one exception) use floyd steinberg dithering! There are a bunch of different types but that's the kind I use.

To make sure everything looks GOOD once dithered, I will dither the drawing, look at the result, and then adjust the original image until it produces a dithered version that I like. Lots of trial and error. Usually that means increasing the contrast so that there are clean zones of pure black, instead of everything having a faint dithered texture on it.

Does that answer your question?? I could talk about this for hours.

[bogleech]

What is running Bogleech.com like? What kinds of difficulties do you have running the site? How did you start it? What issues did you have to overcome back in its infancy? What advice would you give to someone who wants to make a similar personal blog site of their own?

There's nothing you have to do other than paying for your server and uploading your files in the right places! Things only get more complicated if you want to run special software for anything, or if you try to run a community that you need to moderate. Bogleech.com FIRST started as a geocities homepage between 1999 and 2001, and I built it using geocities own in-browser software, but since that made pages with its own weird original code, everything I made in it is utterly broken (older pages like the game sprite galleries) so that was the one problem that arose, but that was like 20 years ago. Now the site consists entirely of just text files in plain CSS code and whatever image files I need. I don't use any software to run or update it and still write it all manually, though I just started using the software "Bluegriffin" to make it even easier. You can open your html file in that and it displays it like it'll look in a browser, but you can write directly into it and add images like you can a tumblr post! Due to being built so manually my site still has no tagging or searching system for people to find my articles, or anything that automatically archives updates. I just add updates as new links on my main page by hand, and write lots of links into the same page to make my own archive pages. There are definitely various programs and services for automating a lot of all that, but I personally like being able to design everything my own way!

[otherswap]

Is it okay if I could make an page about this AU on the Undertale AU Wiki? If that is you are okay with it.

Someone did suggest this a few months back but was denied because we don't meet the story requirements, aka we don't have any "story" you can read/watch yet. Once we get things kicking on the sprite comic though that would change! You have my blessing in advance. Like a preorder on a blessing. Plus I'd probably revive my old FANDOM account to help edit it too.

We actually do have a wiki on Miraheze (that's currently private) but I haven't done much work on it besides some CSS and template things. I'm juggling a fair amount of things as-is and I'm also not good at managing my time very well so it's just sitting there for now.

I'm really interested in doing wiki stuff in general (I have a Cookie Run one I'm working on!) so I just wanted a head start on doing that for OTHERSWAP too. Here's a look at basically the only page I made:

[fishing-ball-z]

also are these from a mugen character set? (i do not go here but i am interested)

Um i actually don't know anything about mugen or fighting games so i'm not sure how to answer this so i may as well take advantage of this to just describe everything i'm doing.

Everything has been from HyperDBZ Indigo (although there's more excellent dbz mugen in the mugenarchive i'm sure). you can actually find the game on archive.org and dig through the files there if you don't want to install it (free!!!!) from their site or something. here's what the actual ingame character select looks like

and this is what the chars directory looks like under the main HyperDBZIndigo directory. they're all playable characters that i can pull sprites/animations from..!

for pretty much every character theres

/files/, which contains a bunch of meaningless binary/text files only used with the mugen engine itself or a mugen editor like Fighter Factory. in here is the sprite and animation files that is used during actual gameplay. plus like, audio

/!HyperDBZ\ Movelist\ [character name]/, which contains the html/css for the game's manual. can find some pngs of cute sprites here but i think they're redundant if i have the actual gameplay sprites

/Palettes/, which contains more readable-by-mugen-only files for recoloring sprites. sometimes these folders have normal pngs you can look through. the devs probably used regular pngs to like, brainstorm or showcase or something

and /states/ which is game config stuff. contains a bunch of random shit ! and quotes ! here's quotes for 18

[itsbenedict]

Alright, Google is zero help with this (every variant of what I'm asking for just floods me with SEO-optimized results for exactly the opposite of what I'm looking for), so...

In my day job, I'm a web developer, mainly. I've got a good deal of experience working with HTML/CSS/JS for front-end UI development, so when I decided to build a content management system for my game project- which is going to be a bunch of pages and menus and buttons and selectors and stuff- it seemed like a natural choice to just build it as a web app, using those skills I already have. It wouldn't be hosted anywhere- the idea would be to just load index.html on localhost and work from a local browser window offline- but I figured I could prototype it pretty quickly with good old-fashioned divs and CSS.

Eeeeexcept I can't do that, actually. The purpose of the app is to manage a directory full of a bunch of structured custom content files- maps, units, sprites, yada yada yada, and lots of small individual changes will happen to a lot of different file resources. Browsers are bad for this, because they rightly have a lot of security protections against webpages accessing the user's filesystem. While I thought the File System API would just let me prompt the user for access to the content folder, and then just work with those files freely from there, that... is apparently a very experimental feature that Firefox doesn't support yet. Seems like a bad choice of thing to rest the entire functionality of the app on.

So what I'm looking for is... is there a framework somewhere for building desktop apps (so I can access local files easily) that uses HTML/CSS/JS for front-end UI development? Something like a browser that's not a browser and doesn't have those inherent security protections to get around?

[cogmented]

i like to ask a question why did you started to be a artists in the first place. I just curious ( p.s love your artwork)

THANKS SO MUCH and i started drawing because i was on the internet a lot as a child. things on the internet around 2013 had a lot of bright colors and movement and i wanted to make things like that too

i started out coding in html and css, making little sprites and what not, but i also looked at young animators like banithekitty, taxicab, swiftkhaos, kay2036, splashkittyartist, koolkitty100, any warrior cats animator under the sun, watching speedpaints, series like homestar runner and the noob adventures, old vhs soviet cartoons and other more full production handdrawn styles...

i started out with animation, i liked seeing things move, i began to draw static things maybe a few weeks after doing animation

(10 yr->15 yr)

i did oc and warrior cats animations mainly. i only started drawing humans/humanoids in 2019, and started drawing full pieces traditionally around 2022. big charcoal fan

here's a hit piece from when i was 9

[shining-kommo-o]

Also, while I’m here, I would like to shout out a project I’ve been supporting on Patreon for a while. It’s a new Pokémon wiki / encyclopedia called Pokéos.

They are a Pokémon wiki that attempts to cover as many parts of the franchise as possible, from the games to the TCG to the anime.

However, what makes the difference in my eyes is their additional features.

All of the information you might want to find on a Pokémon’s profile is easily accessible and shown in a clear way, which is something I struggled with on other websites. But ALSO, my favorite thing mostly is, all of the additional contents. At the bottom of the page, you can see a lot of the art done for that pokémon, along with all of the forms it has ever had, including anime-exclusive forms, or the Stadium 2 color palettes! All done in the style of the render for Pokémon Home! It also includes all the beta content found for that Pokémon like sprites!

Check out Charizard for example! The early generation Pokémon are a great showcase of this!

Another really great feature of the website is the Forgottendex, which showcases all the Pokémon oddities, in the style of the Home renders! This includes stuff like that mongoose from the first season of the anime, the ghost of the Lavender Town tower, that weird squid thing from the manga, and more!

There is also a great feature for artists that allows you to host your very own fan-made Pokédex with your own Fakémon!

And that’s not even including all of the tools like the Dex tracker, the Shiny counter, the Team builder, the list of serial codes and events running right now, and everything else coming soon!

The only downside I’d mention is the loading times. The website seems to rely a lot on fetching things from an API, which can make loading take longer. Also, some of the CSS effects can take a toll on older devices, so i’s recommend turning off the visual effects in the footer.

I’m not being paid to share all of this, i’m just very satisfied with this website after supporting it for a while now, and I feel like a lot of people would really enjoy it! Especially those of us who, like me, LOVE the obscure stuff of the franchise (i’m obsessed with the Stadium 2 color palettes and weird little oddities haha!)

If you use it, please tell me your thoughts! :D

[vorenado-m]

ok that post has 7 reblogs which is kind of exciting but also very embarrassing cuz the game doesnt do anything yet.

i am an aspiring [front-end] web developer and HTML, CSS, and javascript are foundational parts of that job, so i have a solid basis for making an HTML5 game using javascript.

ive probably got around 2-3 dozen hours of crying over javascript under my belt and ive been doing it semi-regularly for a few months (just kind of building random bullshit-- the first independent project i made was a number guesser, and more recently i made a wordle clone that i based a little more than loosely on this tutorial) so thats a beginner project but i am by no means like. just dipping my toes into javascript.

ive been adapting from this specific youtube tutorial. the main changes ive made are the player moving instead of the map. it requires knowledge of objects, nesting, and object/constructor methods, which is something i didnt have a strong basis in before i started the tutorial, but its really straight-forward and the guy does a great job explaining it.

if youre having trouble with the tutorial cuz your foundational javascript isnt up to par, freecodecamp just updated their javascript algorithms and data structures tutorial and it fucks SOOOOO HARD. the first project is building a simple text-based RPG which is what inspired me to try and build a simple 2d game. i dont recommend making this jump unless youre actually at least semi-comfortable in javascript but it is VERY doable.

i drew the sprites in paint.net which is free and it has a grid tool and allows transparency. no tutorial for that i just like pixel art even if im really bad at it lol.

[ginzburgjake]

not a big update, just some cool stuff i wanted to share 😎

so a month ago i started learning coding and i'm still in the beginner stages (primarily focus on HTML, CSS, javascript, a bit of python and react) and today i made my first browser point & shoot game :)

it's not fancy or polished but that's kinda the point - just me following a tutorial to see what i can do and prove to myself that i can. the background is mine, the bird sprites are taken from said tutorial, so you're welcome to take a look (and even post your highest score in the tags, who knows) -- my own record is in the 600s.

[outcaste-mspfa]

how do you get started making a fanventure?

this is a great question!

the two big things youre gonna want to to get started with are to think of a story you want to tell, and characters you want to tell a story with. it doesnt even have to be in that order, Outcaste started with us just deciding to make some new fantrolls one day, and now we have a story i estimate will take about 7-8 acts (not counting intermissions)! much like anything else you can tell a story with, MSPFA is a medium. there are elements of learning some HTML and CSS tricks, which you can find helpful guides for on the site itself, but before you get into any of that id say that you should have a story youd want to tell with this as your medium! -Ruby It's also important to make sure you have the tools to make things easier on yourself! MSPFA has an official discord community that, while we don't use it often, has lots of resources at your disposal. Homestuck.net is basically your one-stop-shop for Homestuck assets, whether you're talking about sprite rips or tutorials. I typically use Photoshop for art and an, ahem, found version of Adobe Animate for flashes, but my cowriters use different tools. Krita is very similar to Photoshop but it's free, but you can also just use MS Paint! There's no minimum bar to clear for making a fanventure! Just have fun with the story you want to tell! Doing it with friends is also a great way to keep things more structured and motivated. -Eden

[wordpress009]

how to and why need WordPress website speed optimization?

In today's fast-paced digital world, speed optimization plays a crucial role in delivering a seamless user experience and achieving business success. This article will discuss the significance of speed optimization and explore various techniques to enhance the performance of websites, applications, and digital platforms.

The Significance of Speed Optimization : Speed optimization refers to the process of improving the loading time and overall performance of a website or application. It is vital for several reasons. Firstly, users have become increasingly impatient and expect instant access to information. A slow-loading website or application can lead to frustration and drive users away, resulting in lost opportunities and reduced conversions. Secondly, search engines like Google consider page speed as a ranking factor, influencing a website's visibility and organic traffic. Therefore, speed optimization directly impacts search engine optimization (SEO) efforts and online visibility.

hire me for website optimization: https://www.fiverr.com/jobair_webpro

Techniques for Speed Optimization

Compressed and Minified Code: Reduce the file sizes of HTML, CSS, and JavaScript by compressing and minifying them. This reduces the bandwidth required for downloading, resulting in faster page load times.

Image Optimization: Optimize images by compressing them without sacrificing visual quality. This can be achieved through various techniques, such as using the appropriate image format (JPEG, PNG, etc.), resizing images to the required dimensions, and leveraging modern image formats like WebP.

Caching: Implement browser caching to store frequently accessed files on the user's device, reducing the need for repeated downloads. This improves load times for returning visitors.

Content Delivery Network (CDN): Utilize a CDN to distribute website content across multiple servers worldwide. CDN servers located closer to the user reduce latency and enable faster content delivery.

Minimize HTTP Requests: Reduce the number of HTTP requests made by the browser by combining multiple files into one. This can be achieved by merging CSS and JavaScript files, using CSS sprites, or inlining small CSS and JavaScript directly into HTML.

Server-Side Optimization: Optimize server configurations, database queries, and scripting languages to improve response times. Techniques include enabling server compression (Gzip), using a reverse proxy cache, and optimizing database queries.

Responsive Design: Ensure your website or application is responsive and optimized for different devices and screen sizes. This ensures a consistent user experience across platforms and reduces the need for unnecessary downloads or device-specific redirects.

Speed optimization is crucial for delivering a positive user experience, improving search engine rankings, and achieving business goals. By implementing techniques such as code compression, image optimization, caching, and server-side optimizations, organizations can enhance the speed and performance of their digital platforms, resulting in increased user engagement and better conversion rates.

Hire me for website speed optimization: https://www.fiverr.com/jobair_webpro/

[ivaalo]

Yeah. Because it's like inflation. People would want always more, but what we do with the RAM capacity is an illusion of what it can actually do.

Also same for storage.

Reminder that Zelda Wind Waker was only 1.2 GB. It's a GameCube open world, without loading time between zones. Colors are calculated to avoid having variation of colors stored in the disk.

Here are multiple things that make websites/games/software too big and slow:

End of image optimization. No more sprite, only big PNG

End of script optimization. Scripts were only there when needed. You could have tons of CSS animations and all. But now we mostly use JS (which isn't bad when optimized), and we import tons of libraries (eehh... NodeJS)

Background tasks. Mostly because you have multiple softwares running without you noticing. They send HTTP requests so they can update.

Also, reminder that Lady Dimitrescu's butt has more polygons than Resident Evil 1.

Nothing is optimized anymore and companies will have bigger and bigger servers to store all of these data, leading to a ecological problem due to the energy to power these datacenters.

Why is that?

Optimization takes time. Leaders leave no time for programmers to optimize their software/games/websites, because it's a waste of time according to them. Capitalism, again! Conformity, no optimization, ready on time, money for the bosses and screw the environment.

we should globally ban the introduction of more powerful computer hardware for 10-20 years, not as an AI safety thing (though we could frame it as that), but to force programmers to optimize their shit better