pixel-art | A minimalist , cross device compatible pixel art editor | Canvas library

Quick update I have added a little bit of code to adjust the character's movement, so when the character isn't idle the character faces the last position it was walking towards. But I have any issue with my character always facing left after any movement action. I also updated my character script:

I'm working on a pygame project but I'm having a few complications with the character's movement. The animation is not in sync (in lame terms), when I move right or left there is suppose to be an animation of the character moving left or right smoothly but in my case when the is moving either left or right I can still see the character image for when the character is in an idle position trailing the character when in walking motion. I also have an issue when my character jumps it doesn't come back own. I tweaked the character speed and refresh rate of the screen but nothing seems to help. Here is my code and image below.

File 1. Handles the running of the game

I'm working on a game project with Pygame. I'm only just beginning to work on the project and I'm kind of stuck. I have made three files each containing code to perform different functions. The first file - "alien_apocalypse.py"contains the class 'AlienApocalypse', which serves to start and monitor user events in the game and contains a few imported modules such as the game settings (which is the 2nd file - 'game_settings.py') and the a class file which contains the all the attributes of one of the game characters 'knight.py'. I'm trying to run "alien_apocalypse.py" which is meant to display my character-knight and the bottom middle of the display but nothing shows up. I'm running it on a Mac with macOS Mojave, IDE is PyCharm. Here are the files:

• File 1 - "alien_apocalypse.py":

I've got some problems while trying to load smaller textures for my pixel-art game using SOIL. This is the result while loading a 40 x 40 image:

But when I switch to 30 x 40:

I checked my code if there are any problems when width is smaller than height, and for 40 x 50 everything is alright. I checked that 30 x 40 with Windows' image viewer, and it seems alright there too. Single thing that may influence in any way the loader is when using the coordinate axis to set the position, but, it works right. This is the code for loading the texture:

TL;DR: Is it possible to load other images based on media-query from svg included via img tag?

I generate a bunch of svg files with have tables with text and icons inside. A PDF would be semantically a better container, but I need to keep such "documents" as images for seamless embed/preview and it probably won't solve my problem. So the story is about icons.

I wrote inline styles with media queries picking icons corresponding to user's screen DPI. Icons are already bundled into sprites, so I use pattern/image[xlink:href] + fill:url(#id). Everything works as needed when I embed svg directly into HTML (DOM islands). But if I embed svg via img tag (i.e. ), it doesn't load icons at all, let alone showing them.

I understand, that I can embed icons via data-URL, but embedding icons for all supported screen dpis seems too much. The irony is that icons are raster ones, hardly vectorizable pixel-art, so I cannot have one set of icons for all DPIs.

Is there a way to have proper icons picked by media query w/o embedding them all?

Partly for funsies, and partly for a design idea I had, I'm trying to convert an animated gif into pure animated CSS.

It's very nearly working but I've hit a snag and am unsure what is causing my issue, or how I could fix it. I have an unfortunate suspicion that I've simply hit a limitation of the technology.

The gif I've been using for testing is this: https://us.v-cdn.net/5018289/uploads/editor/yj/lcdjneh1yoxv.gif

As for the actual CSS, I've been trying to implement the method here (animated box-shadow properties), as it seemed like the most feasible: https://codepen.io/andrewarchi/pen/OXEEgL

I have written a little canvas game to explain my problem.

Note: The game is neither extensive nor finished in any way. It serves only as an example:

For testing a game art style I thought of, I want to render a 3D world in pixel-art form. So for example, take a scene like this (but rendered with certain coloring / style so as to look good once pixelated):

And make it look something like this:

By playing with different ways of styling the 3D source I think the pixelated output could look nice. Of course to get this effect one just sizes the image down to ~80p and upscales it to 1080p with nearest neighbor resampling. But it's more efficient to render straight to an 80p canvas to begin with and just do the upscaling.

This is not typically how one would use a shader, to resize a bitmap in nearest neighbor format, but the performance on it is better than any other way I've found to make such a conversion in real time.

My buffer for the bitmap is stored in row major, as r1, g1, b1, a1, r2, g2, b2, a2... and I'm using gpu.js which essentially converts this JS func into a shader. My goal is to take one bitmap and return one at larger scale with nearest-neighbor scaling, so each pixel becomes a 2x2 square or 3x3 and so on. Assume inputBuffer is a scaled fraction of size of the output determined by the setOutput method.

My idea is to create a big number of divs using php or js. (I write js since yesterday.)

So my self given task is to generate a grid of divs using php or js or both. The idea so far is to have one general div as row and small cells inside. First I determine using php variable how long the row must be and after that I define the number of rows [easy so far]. My problem comes when I generate my grid. Using only php is VERY slow so I decided to use js as well. My first try resulted in cutting the time in half but still slow. So I asked myself is there a way to divide the work of js? Well yes... using functions of course! So I made a function called sector and tried to call it. It worked but still too slow. So what are the best practices for doing such a thing?