Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Pixelart ideas and stuff

Author
Message
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 18th Sep 2018 20:00 Edited at: 19th Sep 2018 12:27
I don't like pixelart. A pixel line and a pencil line may convey the same basic information ("here's a line") but I prefer the more dirty and physical aestetics of the pencil. Also, pixelart has been overused.

Yet . . . I love pixelart. A little bit. So here's some brainstorm about it.

Today's inferior monitors are limited to a native resolution. This adds a bit of a challenge. While any monitor in 1996 could run in 640x480 resolution, this is not longer the case. So what to do? Let's look at some games:


Kathy Rain:
This game uses 320x240, which was pretty much the standard in DOS games. Loads of modern pixelart adventures go for this resolution.



You have to Win the Game
Displays the pixelart on a in-game monitor.



Into the Breach:
Like a lot of other games it has 640x360 resolution, which is SVGA cropped to fit 16:9 aspect ratio. While the "game board" is rendered at 640x360, the HUD elements are rendered at the players native resolution. This is possible because the floating HUD elements don't have to have a fixed on-screen size.



Return of the Obra Dinn:
3D game which use real-time dithering and pixel outlines to create crisp pixel art.



Rain World:
Oversized sprites without outlines displayed at the users native resolution. (antialiased)



Risk of Rain:
Sprites with flat coloring. The game can be set to various degrees of upsampling (no anti-alias)



GoNNER:
Oversized sprites with strictly flat colors displayed at the users native resolution. (no anti-alias)



Caves of Qud:
Uses the users native resolution, with horizontal scan lines.



Lone Survivor:
A fairly low in-game resolution of 178x100, but the game renders each pixel as a mosaic block.



The Last Door:
Ultra-low resolution: 137x77



So there are a couple of tricks we can use:

* Use oversized sprites with flat colors which can be downscaled to any resolution. (Rain World, GoNNER)
* Shaders creates outlines and dithering which fits any resolution. (Return of the Obra Dinn)
* Let the final scale of the sprites be of less important, so they can be displayed at the screens native resolution or 2x, 3x or 4x scale thereof. (Caves of Qud, Into the Breach, Risk of rain)
* Use a really low game resolution which can be upscaled to the native resolution without looking too weird. (Kathy Rain, The Last Door)
* Use low game resolution, but add visual effects to each pixel in the screens native resolution. (Lone Survivor, You Have to Win this Game)
* Various combinations of the above.


There's also the question of how faithful the game is to the pixelart aesthetics. Some games use all kind of different sprite resolutions, which rotates fades and zooms, in 24 bit colors and with high-res shaders on top. What thinks you?
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 18th Sep 2018 20:35 Edited at: 18th Sep 2018 21:14
What is the question? What you have shown above are some of the many acceptable aesthetic choices.

In the end that's all pixel art, HD vector art, etc is... just a "look" the game creator(s) wanted to use for one reason or another. No matter which one you choose some people will like it and some will not same as 3D visual choices.

My current game is ultra low res 128x90. Previous released games used 256x144. I think next game might either 160x90 or 128x72. Really just depends on the game requirements. I might do an HD game instead of pixel art which would make graphics and animation easier.

Anyway you're right a lot of people add a lot of "flash" to their low res pixel art games but again I think this was probably part of the decision to use the low resolution to begin with rather than something done BECAUSE they chose a low resolution. In the end a scope of work comes into play in the decision along with the desired visual style.

If I want to have very well animated sprites with a lot of animation and a lot of FX I can do a much better job achieving that by using 160x90 resolution than I can by using 640x360 resolution. First even if I achieved it the game ends up looking like most other 2D pixel art games being made by Indies so that loses something (uniqueness) right off the bat. Second, I have to draw and animate everything at 16 times the size which is a hell of a lot more time spent for what in the end is ultimately the same things serving the exact same purpose.

For max simplicity and development efficiency I would probably just ditch pixel art altogether and focus on HD vector art. With HD it becomes simpler to animate just a matter of building sprites in layers. Although actually that is how I did my pixel art plant creature this past Sunday. I simply made a layer for the plant body. A layer for the left leaf arm. A layer for the right leaf arm. Then I can easily rotate each layer independently to easily animate. So it "can" work for pixel art I am just saying it will probably end up with a better result when done on HD art.

Or for ultimate efficiency just abstract shapes... use squares, triangles, circles, etc. Bring them to life with rotation and scaling. If done in high resolution all of this rotation and scaling can be done programmatically and still look great.
puzzler2018
User Banned
Posted: 18th Sep 2018 22:33
Do stuff like this in my memblock thread - but no one seems to be interested in memblock work due to the complicated "yikes that looks too complicated"

GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 18th Sep 2018 22:58 Edited at: 18th Sep 2018 23:03
I don't know if its so much people think "that stuff is too complicated" as it is people probably just don't have a reason to be working with memblocks in the first place OR some people are using them as needed but how would anyone know if they are? LOL

I think it's great you are working on the memblocks for 3D puzzler but I don't have any need for working with them now. If I do a project where it makes sense to focus on memblocks then sure I will use them as I'd guess others would too.
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 18th Sep 2018 23:03
That is true puzzle dude. A function that extracted the information and returned (and saved) it in arrays would be a big hit i think

I thought this was a very good implementation of pixel style





GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 18th Sep 2018 23:15 Edited at: 19th Sep 2018 03:34
Yeah that is the first thing I think I would do too Blink. I think the ideal would certainly be for the api to offer better ways of dealing with whatever memblocks are needed for. Like want vertices from a model a function in the api returns an array of a Vertice Type. Want faces same kind of thing. Not sure why this kind of thing is implemented like this to begin with but I guess there must be a reason and as long as the data is all there then it is workable just need to build functions on top.

And yeah that Domina looks excellent. Hadn't even heard of this game.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 19th Sep 2018 12:36 Edited at: 19th Sep 2018 12:41
Rendering to an image instead of the screen would make it possible to do fancy stuff like what is seen in You have to Win the Game and Lone Survivor, or the slightly tilted view in Thomas was Alone

Using memblocks sounds super cool! Anyone got any ideas for pixel stuff which could be archived with memblocks?

GarBenjamin, you suggested using HD vector art. But AppGameKit doesn't support any vector formats, and more importantly, I think drawing vector artwork is super boring! But one thing we can do is creating images with flat colors, and scale them down in the game (see attached) This will let us use a fixed virtual resolution SetVirtualResolution(640,360), while having the artwork displayed at the screens native resolution. A problem here is that the crisp lineart in ship1.png flickers a lot when I move the sprite. So its most likely smarter to go for flat silhuette shapes without any outlines, or maybe letting the noise be part of the games style. Like GoNNER and RAINWORLD.

Attachments

Login to view attachments
puzzler2018
User Banned
Posted: 19th Sep 2018 12:43
Wow Blin0k - thats sounds a really good idea.

Import an OBJ and put the vertices and stuff from OBJ into arrays so can use alongside the other memblock functions.

Great idea - Shall look at doing this at weekend
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 19th Sep 2018 15:09
basicFanatic yeah I understand I've never been a big fan of the HD vector art. Used to pretty much hate the look of it but over time and especially recently I have grown to appreciate it more. For Indies it is a very efficient way to knock out nice looking art and there are gamers who love that cartoony style.

Well you wouldn't need to have support in AppGameKit for directly working with vector art I just meant for efficiency it is a great choice. Just use layers in Paint Shop Pro or Inkscape is even better for it with a lot of functionality such as cutting shapes in shapes, negative space, etc And then save the character / object as a png rotate an arm / leg, eye brow etc in the paint program save that image frame. Spriter or Spline whatever it is called is way to get the support in AppGameKit I think. I've not bothered with it because in my experiments a couple years back seemed like it was adding more work than it was saving.

Anyway render images are very good. I think really it comes down to what is it that you want to achieve. Are you asking how to achieve each of the visual styles in those games you shared?
Bengismo
6
Years of Service
User Offline
Joined: 20th Nov 2017
Location: Yorkshire, England
Posted: 19th Sep 2018 16:08
Quote: "A problem here is that the crisp lineart in ship1.png flickers a lot when I move the sprite."


Are you using mipmapping? (SetGenerateMipmaps(1) before the image is loaded)

Dont scale down a large hi res image then display it on screen much smaller and then move it around otherwise you will get a shimmering horrible effect as the texture sampling skips over a load of pixels. There will be no flickering effect when AppGameKit moves a sprite of any size if mipmapping is used.

You can also add antialiasing too:
SetAntialiasMode(1)

which will give the game a lovely smoothed finish but will be the effect of rendering at 4 times the resolution in terms of performance.


basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 19th Sep 2018 17:28
Thanks Bengismo, mipmap worked! Still, mipmap downscales using Liniar, not Nearest, so it can't be used for pixelart. So I'll stay far away from downscaling pixelart for now!
Bengismo
6
Years of Service
User Offline
Joined: 20th Nov 2017
Location: Yorkshire, England
Posted: 19th Sep 2018 18:04 Edited at: 19th Sep 2018 18:06
You can select nearest filtering IF nearest filtering is what you want.

SetImageMinFilter ( iImageIndex, mode ) with mode=0 means nearest

Its all in the docs. i can really understand people wanting to use massively oversized images on sprites as it will only take extra memory and the detail just gets lost. Better to resize the image either on creation or in code when loading.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 19th Sep 2018 18:43
Sadly, SetGenerateMipmaps(1) are ignoring SetImageMinFilter :'-(

The benefits of massively oversized images are that they can be zoomed and rotated, and still be in perfect quality. But okay, if the sprites don't have to be zoomed/rotated, then it is smarter to resize when the image is loaded.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 19th Sep 2018 22:24
I made a 640x360 pixelart prototype!
Mouse to move
ESC to quit
No gameplay yet, but it may come!

Attachments

Login to view attachments
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 20th Sep 2018 02:33 Edited at: 20th Sep 2018 03:01
A great for a nice single screen shmup game! The trail is a nice touch. The important thing is just have fun and remember lots of interesting FX are really very simple things.

I prefer to wait til the game is done to think about fx / polish if only because that is a time when a little bit of effort can make a big difference and that is nice after spending time on all of the other stuff where often it is building systems and so forth that don't have nearly the visual value of stuff like polish but are vital to making the actual game.

BUT... like say you want to add some eerie fog FX there are different ways to do it. I guess a lot of folks would use shaders I'd just knock it out using sprites. And since I was thinking of adding a colored fog FX in the tower defense during the polish phase even if only for the later levels I will knock that out now and we'll see how it will look in ultra low res. Mainly just saying often times things in games look cool but actually producing those FX requires nothing complex just basic stuff such as additive blending or even alpha blending with a bit of movement, scaling, rotation, etc.

UPDATE: This is just a very quick test of adding fog and of course can always tweak the level of transparency, color, size, speed, etc of the sprites .
Still this is quite acceptable eerie fog and didn't take long at all. That's 63 sprites creating the effect and can play with decreasing or increasing that number as desired.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 20th Sep 2018 14:34 Edited at: 20th Sep 2018 14:35
That's some nice fog! I think it changes the feel of the game quite dramatically. You said you used 63 sprites ... so it's not done with particles?

One problem I have is that I want to game logic to play out on a pixelart 640x360 screen area. But I also want to add a HD sprite at the monitors native resolution, to add CRT-like visuals. I can't really figure out how this could be done.

So anyways, I ended up looking at a youtube video of the game TOKI. here's some observations:

Psychedelic flash effect, instead of the usual white flash:
https://youtu.be/zAjCuzCdK3U?t=4m15s

Make figures feel organic by moving several sprites around.
Also: connected sprites to create rope-like stuff: (wonder how to do that)
https://youtu.be/zAjCuzCdK3U?t=17m22s

Cool frame-by-frame animated death:
https://youtu.be/zAjCuzCdK3U?t=8m5s

Water effect using palette shifting:
https://youtu.be/zAjCuzCdK3U?t=12m57s

Rain and thunder:
https://youtu.be/zAjCuzCdK3U?t=11m11s

Sense of depth by letting the background scrool slower: (parallax)
https://youtu.be/zAjCuzCdK3U?t=5m24s

Pretty animated sky:
https://youtu.be/zAjCuzCdK3U?t=15m41s

Making a sprite feel really heavy purely by moving it up/down:
https://youtu.be/zAjCuzCdK3U?t=14m51s

Also, I noticed that the whole game takes about 20 minutes to finish.
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 20th Sep 2018 15:21 Edited at: 20th Sep 2018 15:43
basicFanatic you can add a curved corners and / or scan lines FX easily I think. Again many would use shaders for these I think but I am much more familiar with sprites...

Just render your game to a 640x360 render image have that sprite scaled up full screen (basically as I guess you are doing now) then switch render target to screen and draw 4 sprites one in each corner for the curves. Only need 1 sprite image x and y flipped as necessary for all 4 corners. For scan lines probably best to just make a singke 1x1 pixel image and have one sprite for each scan line you want to show scaled up by the width of the screen. For optimization maybe maybe it a 1x16 or 1x32 image with alternating dots no-dots vertically. Do the same thing. So if you had a 720 pixel high screen 45 of the 1x16 sprites would produce a scan line filter. Then just a matter of adjusting these sprites color and transparency as desired.

I'm stuck at work now or would knock out an example on the tower defense game but I think you see what I mean. Just have a go at it and should be straightforward.

I will check out the videos of the other stuff when I get a chance to. But some of it sounds related / along the lines of what I have been building with my sprite behaviors.
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 20th Sep 2018 15:54
Also this kind of stuff can be sorted out at any time and isn't something that needs to be done now. I'm an eat your dinner first get dessert / candy later.... work first play later kind of fella. Lol And this stuff is the candy part of game dev imo. It's easy stuff that looks good but there is no substance to it meaning without an actual good game it is pointless which is why I focus on it last. Once you get to the polish phase the only limit is your imagination. You can come up with loads of cool fx/juice/flash/polish and layer those things on to dramatically jazz up the presentation of the game.

Not trying to discourage you from it and I get why people like this stuff so much it just looks interesting. I am just saying makes more sense to focus on building a solid fun game first... that is where the real work and importance is. And again I am only saying this because I have fallen into the trap before of being distracted by shiny objects and it is a lot of fun but ultimately is the destroyer of completing any game projects. Lol

Maybe we can even make a thread here focused on polishing a game and covering the easy ways to add pizzazz. I will definitely be covering all of the polish added to my tower defense game once I get to that point. So that might be helpful to some folks too.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 20th Sep 2018 21:02
Thanks! The scanlines are working now. I also created a bitmap font (attached) ... so yes, I see your point. I should focus on getting the actual game mechanics up and running!

Attachments

Login to view attachments
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 21st Sep 2018 01:57 Edited at: 21st Sep 2018 05:54
basicFanatic that's great you've got the scanline overlay working. And a nice bitmap font knocked out too (geesh that sure reminds me of the Amiga days all of the bitmapped fonts).

Really some of the things it just will be much simpler depending on exactly what kind of game what kind of FX you want to use an engine / framework dedicated to it. Well I mean simpler in the sense that some things were built specifically for doing certain things and they excel at those kind of things but won't have other things AppGameKit has, etc. It's basically a use the right tool for the job.

Like if you wanted to do games with all of the FX of the arcade games and SNES etc I think your best bet would be to use Tilengine. I haven't actually used it yet I almost did but found AppGameKit around the exact same time.

This thing was built specifically to make the kinds of games with the kinds of FX you seem to want: control over the rendering of every single scanline which allows you to do all kinds of cool things such as the 3Dish scenes in the Castlevania games and that leads to also Mode 7 on SNES style of FX, control over palette to do color cycling, etc. These are all things that would take a ton of work to do otherwise. I suppose with the right shaders you could do it but just makes sense to use a framework dedicated to such games imo.

I think some of this could be achieved with a shader. Otherwise you would need to try to use an array or memblock to store the full screen background imagery and try to process it fast enough line by line to achieve the barrel roll and mode 7 FX. lol

All sprites and tiles. Maybe TGC could look into incorporating this into AppGameKit. The website says "Tilengine can be easily embedded inside other game engines as a slave renderer on an user-provided video surface."





GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 21st Sep 2018 03:39 Edited at: 22nd Sep 2018 11:52
basicFanatic a gift for you... I just happened to remember I had done some simple shader work a while back and implemented a scanline fx in that example project.

save this as "horizontalscanlines.ps"


save this as "verticalscanlines.ps"


Then just load with something like shdrRetroScanlines = LoadSpriteShader("shaders/horizontalscanlines.ps")
And apply to your sprite you are using for the full screen render image like SetSpriteShader(sprRender, shdrRetroScanlines )

I went for a subtle FX if you want the scanlines to be more distinct just decrease the 0.7f and increase the 1.43f values.
Alternately change if (mod(gl_FragCoord.x, 2.0) < 1f) to if (mod(gl_FragCoord.y, 4.0) < 2f) and that is double lines which looks quite good.
With a simple shader you won't even need to use sprites for this FX.

Horizontal


Vertical (for something different although I swear I remember some arcade machines back in the day actually having this perhaps the monitor was rotated)


if you go for the double thick scan lines you'll get something like this...

Horizontal double


Vertical double


May increase the 0.7f to 0.8f and decrease the 1.43f to 1.25f for the double versions. Anyway you can play around with all of that stuff.

I am not usually a big fan of scan lines FX in games usually but I think for an ultra low res game it might actually be useful. Kind of thinking maybe implement something bizarre like diagonal lines might be good.
Be something different anyway. LOL

But for now no more of this stuff for me!! Must focus on the game. I told you this is one of those things a person starts and get stuck here. Kind of like a black hole nothing can escape. Well I am escaping it dammit!! LOL
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 21st Sep 2018 05:59
I finally watched all of the videos of the games you shared in first post. The Last Door looks awesome imo. I like ultra low rez in general but I think that game just looks extremely good much better than some of the others.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 22nd Sep 2018 09:27 Edited at: 22nd Sep 2018 09:27
Thanks for shader! Unfortunately, I ran into a weird error:
Error: Pixel shader horizontalscanlines.ps failed to compile: 0(13) : error C7502: OpenGL does not allow type suffix 'f' on constant literals in version below 120

Sounds like OpenGL is outdated or something? So anyway, I made some really nasty screen flicker effect by downscaling the screen render image to random values. While it looked very authentic, it made the whole thing unplayable. :-p But a fun little poor man's shader.
Also, it seems like resizing the image made it default to liniar, so I had to do SetImageMagFilter( TextureImg, 0 ) and also SetImageMinFilter( TextureImg, 0 ) after the resize.

While I think I'll stick to AppGameKit for now, Tilengine sounds really good. Pixel level collision detection too! Speaking of which: Eugene Jarvis mentions collision detection in Robotron:
https://youtu.be/90GuCjmNzVI?t=21m32s

At another point, he talks about his favored design philosophy:
https://youtu.be/90GuCjmNzVI?t=27m54s

I remember a time where everyone was going on about how the RIGHT way to make a game was to start with a big-ass design document. I'm glad I never got too much into this!
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 22nd Sep 2018 11:48 Edited at: 22nd Sep 2018 11:56
EDIT: I updated the code for the shaders in the post above.

Sorry about that. On my laptop f compiles fine to specify a value as a float. When I ran it on an html5 build I got same error. Should have updated it here as soon as that happened.

Just remove the f behind the numbers and make sure each have a decimal. So 1f would be 1.0, 2f becomes 2.0 etc.

Do that and they will work fine. I will update the code now be a bit because I am on my cell phone. Lol
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 22nd Sep 2018 12:11 Edited at: 22nd Sep 2018 12:23
Classic overlapping rectangle collision code. I write that in every language/framework that doesn't already have it. Think I did here too in my earliest projects before I realized there was a GetSpriteCollision function built-in to do it. Lol

Great stuff on the design approach too. I like design and used to plan out more but never liked detailed design (well not since a long time anyway.... experience teaches it is bad) for any kind of software development and fought it on jobs as well. It is a waste of time = waste of money.

I just keep a high level design that basically loosely is what I am making what the game is about etc but leaves all implementation details out. Kind of an abstract design simply for guidance. And then yes just sort of prototype way forward. Try something does it feel good keep it. Get ideas along the way. If fit within scope / if early in development implement the ideas try them out. If idea increases scope of work too much / if too late in development (i.e. too close to being done) just save that idea (document it) for a future update / version 2 sequel / new game.

A huge percentage of modern Indie hits are directly from prototyping their way there basically as he is talking about in the video. Many indie hits came out of game jams where same process was applied: finding the fun. You want to find the fun the important focus as fast as possible.

I think game design & development approaches are super important and very interesting stuff to discuss and read about!
PHeMoX
6
Years of Service
User Offline
Joined: 9th Jan 2018
Location:
Posted: 25th Sep 2018 23:46
Quote: " While any monitor in 1996 could run in 640x480 resolution, this is not longer the case. So what to do?"


Actually, that's the beauty of setting a virtual resolution, you can use something common like regular HD resolution or 1024x768 for the actual resolution, but use a virtual resolution that is as low as the MS-DOS classics. Yes, you would have to adjust your art and maybe 3D assets accordingly. But it definitely can still be done. You can basically make games in any resolution.

Into the Breach by the way has an actual minimum resolution of 800 x 600, you can check this for yourself by pressing the ~ to enable the console and then type : resolution <width> <height> That changes resolution of the game window. Specify resolution in pixels. Minimum resolution is 800*600.

The pixel art in Into the Breach actually is fairly high resolution anyway. But I can see the point you were trying to make if the idea is to only ever run 'native monitor' resolutions. Then again, any of the super low resolution stuff kind of never was supported by any native standards anyway. I'm pretty sure the truly truly low native resolution stuff like 320 x 200 has been obsolete since like the late 80s (1987?) and especially with the Windows 3.1 introduction 640 x 480 fairly quickly became a new standard. We're talking roughly 1990 and beyond now. With the exception of maybe MS-DOS games, you'd most like have been playing games in a lower virtual resolution even then. I'm pretty sure I've played the original Golden Axe in something very close to 640 x 480 resolution, despite all it's glorious pixel art. Games like the Secret of Monkey Island and FullThrottle too.

So anyway, my point is that virtual resolution is the key. But I'm guessing that wasn't really your question in your search of how others tried to go pixelart style. I definitely do like pixel art games a lot, when done right.
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 26th Sep 2018 00:35 Edited at: 26th Sep 2018 00:51
Most Amiga games were around 320x200 (I guess maybe 352 x 224 for PAL) and the awesome Intellivision games I played the heck out of in early 80s had a whopping 160x96 resolution (actually I think I read it was 159x96 because for some reason the right most pixel was never displayed). Of course most C64 games were effectively 160x200 for NTSC due to multicolor mode making pixels double wide.

I like ultra low res a lot. After decades of games always pushing for more more higher higher I find low resolution and particularly ultra low resolution refreshing.

I get a laugh from some of these so called experts out there riding the Indie biz popularity who seem to have jumped in later on and never bother to even research the past. One article that stood out the writer (at Polygon I think it was) said something along the lines of some of these new Indie games are using resolutions less than 256x240 which I am sure no machine in history was ever that low. LOL I thought "yeah... well this means you are not familiar with a C64 or an Intellivison" same as another writer mentioned having games with some larger sprites using much larger pixels saying that is not authentic retro no machine did that. In reality, many of the 8-bit machines from the TI-99/4a to C64, Intellivision etc all allowed doubling the size of sprites horizontally and / or vertically.

Kids writing these articles I guess.

I find SetViewZoom or whatever it is that instantly scales up although only if the scale factor is same for width and height handy. Otherwise need to use render image which is also very easy and works great.

Wait... are you saying all a person needs to do is set virtual resolution to something like 128x90 and it will auto scale up 10x8 to fill a 1280x720 window/screen?! That'd be awesome if it works that way I thought I had tried it and it always cut off the image or other weird stuff.
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 26th Sep 2018 16:31
Quote: "Wait... are you saying all a person needs to do is set virtual resolution to something like 128x90 and it will auto scale up 10x8 to fill a 1280x720 window/screen?! That'd be awesome if it works that way I thought I had tried it and it always cut off the image or other weird stuff."


That's exactly right. As for things getting cut off, I don't know if the virtual resolution is limited to the standard ratios or not. Like if you did something really weird like 147x33 how well it'd work out, I never tried anything odd like that. But I've set the virtual to 320x240 (zelda clone) but had the regular resolution at 1080 and broadcasted it to my tv.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 26th Sep 2018 16:43
Phaelax, I think you're right that the virtual resolution is limited to some standard ratio, perhaps the monitor. Once I set the virtual resolution to any other ratio, everything screws up!
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 26th Sep 2018 17:18
I can render to weird resolutions here. The problem is that the movement doesn't snap to the pixel grid. I could try rendering to a sprite, but then the aspect ratio goes awry.

GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 26th Sep 2018 17:44 Edited at: 26th Sep 2018 17:47
Interesting. For previous game projects I used SetViewZoom (or whatever it is called) and that is all that was needed to scale everything up into its correct place for the real resolution (the scale factor required needs to be same for width and height because viewzoom takes a single parameter).

For my current game 128x90 resolution scaled to 1280x720 I just use a 128x90 render image and the sprite for that image is scaled 10x8 which also works fine. In both methods I keep virtual resolution same as actual screen/window resolution. Was only way I could get consistent results.

I will have to play around using only virtual resolution again sometime because that should be a little more efficient.
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 26th Sep 2018 17:47
128x90? Are you mimicking a tomagotchi keychain?
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 26th Sep 2018 18:25 Edited at: 26th Sep 2018 21:37
Never heard of such a thing. I just find ultra low res very interesting. Started out with 80x72 but that was too small for the amount of visual detail and playfield I wanted. Could be done of course especially using just colored rectangles. As it is right now (I put a link in post above) even the tiled screen consists of 4x4 tiles.

There is some awesome stuff made for the LowResJam 64x64 screen. Version of old Tapper game in here as well as even some nice 64x64 3D games...


Also think the Pico-8's 128x128 16-color games are very interesting visually and very well done overall.
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 26th Sep 2018 23:22
Out of curiosity I looked up that tomagotchi keychain. Virtual pet. Been around 20 years but not something I ever got into or heard of anyone having but I probably wouldn't have paid much attention. It is an interesting concept though.

They are truly ultra low res. Classic versions with 32x16 screen and new mini model using 16x16 screen. Goes to show you don't need many pixels to make an I guess quite popular game. Black and white too! Lol
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 27th Sep 2018 13:33 Edited at: 27th Sep 2018 13:48
Just figured out why the rendering messes up when I try a virtual resolution with a different aspect ratio of that of my monitor.

The problem is that renderToImage() behaves radically different than I had expected.
Quote the documentation:
"when you render to an image it will draw to the image exactly what it would have drawn to the screen"

This means that if my virtual resolution has a different aspect ratio than my monitor, and I render to an image, then that image will include black bars to make the virtual resolution fit the monitor.

So I tried playing along with this. The code below works. Only problem is that I can't figure out how to calculate the values for CreateRenderImage()
It should be based on screenW x screenH, but with width or hight extended to make it match the monitor's aspect ratio (so it fits how screenW x screenH will be displayed with black borders added)
CreateRenderImage( sceneImg, 640, screenH, 0, 0 ) is right in this case, since extending the width from 200 to 640 makes it fit a 16:9 aspect ratio if black borders are added to the sides. But how do I find those numbers?

GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 27th Sep 2018 15:26 Edited at: 27th Sep 2018 15:29
I've not had an issue with using a render image but as you said I always set virtual resolution to width and height of the render image before rendering to it. Using the method mentioned earlier with only using virtual resolution is what was giving odd behavior when I tested it. That was back when I first found AppGameKit though so could have been my own lack of familiarity behind it.

I'm not sure what you mean by how do I find those numbers. I guess you mean you never really know what the resolution will be on a device? For me it is easier probably in that I use 1280x720 as my window / full screen size and everything works perfect for desktop, web builds and even the few tests I did broadcasting to my cell phone.
PHeMoX
6
Years of Service
User Offline
Joined: 9th Jan 2018
Location:
Posted: 27th Sep 2018 16:57 Edited at: 27th Sep 2018 17:00
Quote: "But how do I find those numbers?"


I think you're not using SetWindowSize correctly here, because contrary to your commented statement, those two values do matter. They set the resolution lol.

If I understand the manual properly, AppGameKit will still (always) try to find the closest matching resolution or stretch to fit if the aspect ratio is off. If the render image then is taking things from 'off screen positions' it will surely lead to a black block being added when it shouldn't. I think you should be able to deal with this using a 'regular' SetWindowSize and a stranger SetVirtualResolution.

From the manual:
"If your chosen resolution is greater than the device can display than the device will use its highest possible resolution, you can use GetDeviceWidth and GetDeviceHeight to find out what was used. On mobile devices using a screen resolution with a different aspect ratio than the device will result in stetching. You can check the aspect ratio of the device with GetMaxDeviceWidth and GetMaxDeviceHeight."

Looking at SetVirtualResolution in the manual, it does state it also stretches on PC and adds black borders if necessary. So yeah, it does seem best to take the screen aspect ratio into account. There's a command for that; GetDisplayAspect() , that will return a single value. If you multiply by that value, you should get numbers matching the proper ratio.

My window is set to 800 x 600 gives a GetDisplayAspect() of 1.333333... , 600x1.33333... = ~800 . Other way around obviously too; 800 / 1.3333... ~600.

Alternatively, you can (or rather, probably should) set SetScissor(x,y,x2,y2) to allow for black borders when a resolution doesn't matter a chosen resolution particularly well. In my case, my laptop resolution is 3000 x 2000, so a resolution of actual 800 x 600 creates black bars on the left and right side of the screen as the aspect ratio is not a perfect match.

Quote: "As for things getting cut off, I don't know if the virtual resolution is limited to the standard ratios or not. Like if you did something really weird like 147x33 how well it'd work out"


Yes, this can happen, but will mostly have to do with how entities, images and text on screen don't match the smaller size anymore. You can literally have any resolution.

Just make sure the regular resolution ( setwindowsize( width, height, mode) ) is something your monitor supports, set virtual resolution (SetVirtualResolution(40,123) to something lower and use SetScissor(0,0,40,123) accordingly (well, if you want best control of what is visible). That's really all.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 27th Sep 2018 17:53
Quote: "contrary to your commented statement, those two values do matter. They set the resolution lol. "

PHeMoX, I think you forgot this from the manual about SetWindowSize:
"In fullscreen mode the width and height will be ignored and the desktop resolution will be used."

I have made my code accept any virtual resolution. The problem is that the sprite seems to change size when I move it.

PHeMoX
6
Years of Service
User Offline
Joined: 9th Jan 2018
Location:
Posted: 27th Sep 2018 23:56
Quote: "PHeMoX, I think you forgot this from the manual about SetWindowSize:
"In fullscreen mode the width and height will be ignored and the desktop resolution will be used.""


Yeah I actually did miss that, I stand corrected. However, if you set a resolution to 800 x 600, with full screen mode set. And then use a virtual resolution of 3000 x 2000 pixels as is my laptop resolution, you will find it doesn't render the full screen properly at all.

If you set window size to 3000 x 2000, full screen and virtual resolution to 800 x 600, there is no issue. The latter is the same result as setting 800 x 600, full screen and virtual resolution 800 x 600.

So… it doesn't seem to ignore literally everything. I think it may actually try to scale things.

I'm not sure how to confirm this though. Printing GetDeviceWidth and GetDeviceHeight only works for windowed mode on PC it seems, where resizing the window also changes what is printed. In full screen mode not so much. So I guess you're right?

Then again ;

Print(GetScreenBoundsRight())
Print(GetScreenBoundsLeft())
Print(GetScreenBoundsTop())
Print(GetScreenBoundsBottom())

Returns roughly the resolution set through code and how it was scaled to best fit the native resolution (presumably a virtual resolution).
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 28th Sep 2018 04:18 Edited at: 28th Sep 2018 04:44
When I worked on my game project tonight I did a quick test of just using the virtual resolution and encountered the same issue as I did when I tried it before.

I figured it out quick though since I know AppGameKit much better now. What happens is that for some odd reason the display aspect ratio doesn't seem to be set when you use SetVirtualResolution so it scaled up the graphics but in a square shape with black borders on each side. It seems like it is either defaulting to 4:3 or possibly even a 1:1 aspect ratio. Anyway the trick is to use SetDisplayAspect()... in my case SetDisplayAspect(1.777777777777778) and this correctly filled the entire window instead of cropping the sides off or whatever it was doing.

At any rate this is good to know. I will probably just stick with my render image approach for this game but next game may switch over to using SetVirtualResolution and SetDisplayAspect. I don't see any problem with using the render image though and it does make it very flexible as well as can use sprite shaders on it for added FX like the scanlines i will add in polish phase. Especially considering in my case the render image is only 128x90 in size and setting sprite scale 10, 8 handles scaling up to fill the screen.

EDIT: Disregard I will just need to wait til I can take the time to do a more thorough test. My focus tonight was on making progress on my game project and I did a quick test as mentioned above. BUT I didn't remove the use of the render image I simply commented out the SetSpriteScale(renderImage, 10, 8) line and commented out the SetvirtualResolution(1280, 720) line after switching render target back to the screen which means virtual resolution was set to 128x90 and that may in fact be what was causing the issue because that would be an aspect ratio very close to 4:3. Which is why using SetDisplayAspect before rendering to screen fixed it. I think the setvirtualresolution 128,90 for drawing on render image was correctly setting display aspect to ~1.42 as needed but then when actually rendering to screen it needed to be 1.77
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 28th Sep 2018 14:00

I found out that setting SetSpriteSnap(heroSpr,1) actually STOPPED the sprite from snapping to pixels. Once I set it to SetSpriteSnap(heroSpr,0) it had perfect snapping. What's up with that?

But with that fixed, I think my system is working.

I guess there must be a smarter way to convert integers to float than my int2float() function. And I'm not sure if I should use GetDeviceWidth() or GetMaxDeviceWidth()

But well, stuff seems to work!

Here's the code! Criticism & suggestions welcome!!!









PHeMoX
6
Years of Service
User Offline
Joined: 9th Jan 2018
Location:
Posted: 28th Sep 2018 22:26
Quote: "I guess there must be a smarter way to convert integers to float than my int2float() function. "


Something like this would work too, convert to string, convert string to float ;



As for your GetDeviceWidth() question, I'm not sure. Probably does work fine for what you're using it for. I am not sure what changes when a screen rotates and changes width and height though, Apparently some funky stuff can happen, but it's more a mobile platform 'issue'.
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 29th Sep 2018 02:33 Edited at: 29th Sep 2018 02:34
Yeah, most likely the code runs fine as long as it stays outside those mobile things.

I'm trying to do pixelart in Krita, check it out:

Attachments

Login to view attachments
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 30th Sep 2018 00:55 Edited at: 30th Sep 2018 00:57
Another Krita "pixelart" thing:

Attachments

Login to view attachments
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 30th Sep 2018 04:45 Edited at: 30th Sep 2018 05:20
That's an excellent duck. Has character. Is that one frame from an animation you created?

The second one looks high fidelity good for a cut scene or something in a dark rpg game perhaps. It doesn't have a pixel art feel to it at all to me at least but I think you like the high resolution stuff and that is fine of course. Well not high resolution but you know what I mean for pixel art I think 640x360 is high resolution for pixel art since that is only 1/2 of the native resolution width and 1/2 the height of many people's computers and cell phones too probably.

The important thing I think is to just choose a visual style and resolution that you like working with AND that you can make all of the content needed to make a game within a reasonable amount of time (especially if you would like to sell it and start an Indie game dev business... if just for fun then it doesn't really matter).

This is another reason (besides really liking the aesthetic and finding it very interesting visually) why I go ultra low resolution. Most games need a lot of graphics and animation (unless going with primitives with is a valid solution as well) so although it would be cool to make games that look completely fantastic it generally just isn't possible unless it is a complete labor of love done purely for fun over a period of many years and / or keeping a super tiny scale.
It comes down to skills, tools and being able to put the amount of time in required to make such things. The majority of Indies selling games don't have these skills, tools or time certainly few have all of them.

But anyway just to illustrate here are some games for the Neo Geo console which has a resolution of 320x224 pixels and yet they blow away just about every (if not every single one) Indie 2D game even those using a much higher resolution (worth seeing them in action... the animation)...



It's interest to look at such things and see the resolution in itself is not what is making the difference in quality here. It is pure skill, tools and time.

For me I wouldn't even attempt such a thing even if possible the amount of time required to achieve those level of visuals consistently throughout game beginning to end.... I would be dead by the time I completed one game. lol

So taking them down to 160x90 and going for more stylized looks I'd be shooting for something more like this...



And that would make it doable for me to complete the games.

Anyway I say all of that to basically ask what kind of style are you going for or are you basically experimenting with different things to find something that interests you for the "look"?
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 30th Sep 2018 13:39 Edited at: 30th Sep 2018 15:14
The duck was just me trying to redraw hi-res art as pixelart. (See attachment for the original, which is a Pixi book drawn by Mårdøn Smet)

Please notice that I put the "pixelart" in quotation marks in my second drawing! I made it to try out the Dan Fessler Technique in Krita, which use a layer stack to allow you to draw with real-time dithering:
FILTER LAYER: Artistic/Index Colors
FILTER LAYER: Adjust/Desaturate
FILL LAYER: 4x4 dither texture (Overlay blending mode, adjust the opacity to taste)
PAINT LAYER (paint in grey values)
So far I simply painted a greyscale painting in "index colors", but I think it could be used for more sophisticated artwork too. Something more like this:
https://www.neogaf.com/threads/i-love-the-look-of-pc98-games-aka-the-anime-pc-game-machine.1202626/


I ... don't quite know what I'm doing! I'm started this thread, then ended up beginning at yet another game project and began researching how to do pixelart in Krita. But I like whatever path I'm on.

Latest version of the game attached.
Shoot with WASD, move with mouse, Shift key for weird effect. Esc to quit.

Attachments

Login to view attachments
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 30th Sep 2018 16:51
I get that. I believe a lot of development in general (both game and non-game) comes down to experimenting. I do dozens maybe hundreds or even thousands of little experiments with every game project from iterating on visual styles to find something I like to finetuning play mechanics, timers, controls, etc. Basically through masses of experiments we can iterate our way forward... do two tests compare keep the best one. Do another test. Compare keep the best and so forth.

Anyway, I just downloaded and checked it out. I like it. It seems like a very solid start and I like the organic growth of the level. Was thinking this would actually have fit the theme of the last LudumDare game jam or one before that which was running out of space. It is a good core to build your game around I think. In its current form the player seems massively overpowered so might need to look at making the wall chunks require multiple hits each to be destroyed but feels workable already.

Login to post a reply

Server time is: 2024-04-19 09:35:52
Your offset time is: 2024-04-19 09:35:52