DIV ARENA FORUMS

A bit of a stretch

dom cook - 11-3-2019 at 06:03 AM

Have you ever wanted to be able to draw a textured quad in DIV?

Well now you can.

Only a few mind you. And keep them small. Those map_get_pixel functions are hard work.

Move the area to be mapped wtih the cursor keys (_left, _right, _up, _down).
Deform the quad by dragging the vertices (mouse.left)


Attachment: RGB.FPG (50kB)
This file has been downloaded 1059 times



on target.png - 99kB

Attachment: SQTEX.PRG (6kB)
This file has been downloaded 906 times

[Edited on 11-3-2019 by dom cook]

Vortigano - 11-3-2019 at 02:56 PM

I like it. You could use a collision priority and a "virtual" depth list where each element is listed, so the circles don't stick together when you press the mouse button. Later I'll go home and send you something for that.

Vortigano - 11-3-2019 at 08:15 PM

Well arrive to home, i'll try to add something on your prg so the circles don't stick together when you press the mouse button.

dom cook - 11-3-2019 at 08:51 PM

Thanks for the help although the vertex handles were only implented so I could easily check that the mapping was ocurring correctly. The plan is to use this texturing to make a rotating dice and I've progressed a bit from what I first posted here.
Right now it's looking like this
dice.gif - 12kB


As soon as I've got the faces glued together I'll post it in the WIPS




Vortigano - 11-3-2019 at 08:55 PM

I always thought that float variables should be necessary to achieve deformation of the texture.

Vortigano - 11-3-2019 at 08:57 PM

Congratulations for dealing with it using integers. :)

dom cook - 11-3-2019 at 09:04 PM

Same here, also 3D in general but although the result isn't as good as could be achieved with less effort in other languages I'm pretty happy with it. It's a nod at the world of 3D rather than an attempt to join it.

Vortigano - 11-3-2019 at 09:21 PM

I hope my humble contribution motivates you to continue your journey. ;)

Attachment: SQTEX_VORTI.PRG (9kB)
This file has been downloaded 916 times

Vortigano - 11-3-2019 at 09:42 PM

"Catched.got_enabled" should be outside the "repeat" haha, well i think I put some errors however it works. :lol: bye-bye!

dom cook - 12-3-2019 at 04:48 AM

Quote: Originally posted by Vortigano  
I hope my humble contribution motivates you to continue your journey. ;)



Hey, having someone show an interest is pretty encouraging in itself. Thanks for joining in.



[Edited on 12-3-2019 by dom cook]

dice.png - 31kB

dom cook - 13-3-2019 at 09:41 AM

I'm not sure if this belongs here anymore or should be a new thread in the WIPs but I'll post here for now.

My reason for wanting a texture was so I could make a textured cube, specifically a dice. I've played around with board game conversions before and I think a simple random number generator just doesn't work on the emotions and sense of suspense in the same way as a dice totering dice would. My goal is to capture that sense and for that I need something that actually captures the feel of a dice. First off, it's got to look like one.

It might be of potential interest to observe the process so I'll be posting as I go along. If anyone has any questions, comments or criticisms, don't hesitate to let me know.

Anyway, so far I've got a cube of sorts, but it's not satisfactory because, on closer inspection, dices (or dies or whatever) are not cubes, they've got rounded edges. To represent those, I've first pulled the faces apart slightly and then created some thicker edges to fill the gap using rows of ellipses. These are drawn, in green, on the wireframe cube next to the dice.

The next step will be to transfer them onto the dice and calculate their correct colour, which should be a shade of grey halfway between the shades on the two faces they belong to.








SNAP0014.png - 29kB

dom cook - 13-3-2019 at 09:22 PM

Ok, It's not perfect but it's more like what I wanted.

Painting the edges the average colour of the two sides they bound doesn't work because sometimes the edge need to be shinier than either of its faces. So I ended up having to approximate their normals. Basically the more directly upwards a face or edge points the brighter it is.


dice09.png - 21kB


It's always possible to work on improving the look later but now I want to move on to effecting a convincing roll. I'm not even going to think about using anything like realistic 3d physics for this, instead I'll implement some of what I'm calling stylized physics.

Anyway here's the code so far in case anyone wants to play with it.


Attachment: DICE10.PRG (13kB)
This file has been downloaded 973 times

Attachment: RGB.FPG (75kB)
This file has been downloaded 987 times

[Edited on 13-3-2019 by dom cook]

BreadCaster - 14-3-2019 at 12:30 PM

holy moly that looks great Dom! For a quick fix you could make it a bit lower resolution/smaller final graphic to hide the slight jankiness of the edges, so people will think its a nearest neighbor style resizing glitch - but aside from that really solid looking work :D

dom cook - 14-3-2019 at 05:08 PM

Yes I think I'll have to revisit that aspect of this little demo later when I tidy up the code. I think that currently the dice object is a bit large for the screen anyway given that it's meant to be for a boardgame style scenario. I've noticed the lighting isn't working properly too. Thanks by the way.



[Edited on 15-3-2019 by dom cook]

dom cook - 14-3-2019 at 05:29 PM

Here's today's effort. I've been working on the style of the roll.
To be entirely honest, I have done something like this before so I know more or less where I'm going with it.
The roll has several stages reset, shuffle, align, roll, slow, stop on one edge and topple(either forwards or backwards for suspense). So for I'm up to stopping on one edge. You can run through what there is so far by following the on-screen instructions.

At the moment the dice only spins and does not travel across the screen. This will be implemented once I'm happy with the roll.

roll.png - 35kB

The wireframe and random texts are for debugging purposes.

Here's the prg

Attachment: DICE315.PRG (18kB)
This file has been downloaded 964 times

ahmok - 15-3-2019 at 08:46 AM

Hello....

I have an innovative suggestion. Is it possible to make a rotating Tetrahedron? I mean this:

https://www.youtube.com/watch?v=krdrzI3hQYc

In addition, the words "DIV Games Studio" are on each side of this rotating Tetrahedron.



In conclusion, a new splash screen with this rotating Tetrahedron will be extremely fascinating and persuasive. Right?
:cool:

This nice splash screen can help to promote DIV Games Studio.

dom cook - 15-3-2019 at 10:04 AM

Yes that would possible.
However, although a rotating textured volume might be eye catching, it's a lot of work for DIV whereas other languages can achieve it with a couple of lines of code. In my opinion, a splash screen should play to DIV's strengths and not foster unrealistic expectations about what can be achieved with it.
Having said that, if the 3d shape were rendered roughly with a few glitches here and there and thus without putting too much strain on DIV, it could work. For example, look at some of the 'independent' games that are on the market these days. I saw one yesterday which had pixels the size of lego bricks and a four colour palette. It still looked very cool.

[Edited on 15-3-2019 by dom cook]

[Edited on 15-3-2019 by dom cook]

dom cook - 15-3-2019 at 02:48 PM

OK, I've got the roll working and resetting. So now all I have to do is get the dice rolling along in a semi-convinving way. After that it's just a case of tarting everything up a bit. Maybe I could add another dice if the computer can handle it.



on a roll.png - 21kB

Attachment: DICE315c.PRG (19kB)
This file has been downloaded 997 times

dom cook - 18-3-2019 at 04:22 AM

So the tarting up phase is now underway.
So far I've Improved the lighting and added a perspective view. Up until now it was orthographic so when the dice was lying flat you could only see the top face. Now you can see a little bit of the sides.
If you can't see the difference, try dragging the dice around the screen with the mouse (left button.) Change view with the enter key.

diceN.png - 13kB

Attachment: DICE318.PRG (17kB)
This file has been downloaded 930 times

ahmok - 18-3-2019 at 01:05 PM

Quote: Originally posted by dom cook  
Yes that would possible.
However, although a rotating textured volume might be eye catching, it's a lot of work for DIV whereas other languages can achieve it with a couple of lines of code. In my opinion, a splash screen should play to DIV's strengths and not foster unrealistic expectations about what can be achieved with it.
Having said that, if the 3d shape were rendered roughly with a few glitches here and there and thus without putting too much strain on DIV, it could work. For example, look at some of the 'independent' games that are on the market these days. I saw one yesterday which had pixels the size of lego bricks and a four colour palette. It still looked very cool.

[Edited on 15-3-2019 by dom cook]

[Edited on 15-3-2019 by dom cook]


Thanks for your detailed explanation!!!






MikeDX - 18-3-2019 at 01:30 PM

I'm currently trying to get a working dev laptop running for DIV since my new mac is not even compiling without issue.

Once this is done, I'm going to try to get a system where you can upload a zip or a prg and assets and it will compile to a html page. This should have been done ages ago as compile as a service but it never got finished.

Hopefully then if we add this to the forum, we can embed things like this as actual forum posts, instead of images. It would be amazing to see your work in progress as a real example online dom and it truly deserves it.

dom cook - 18-3-2019 at 09:13 PM

That sounds like very a nice feature. It will really help to bring the site to life. I'll keep doing my bit churning out the demos.

dom cook - 19-3-2019 at 07:47 PM

Just a picture.

SNAP0003.png - 22kB

BreadCaster - 20-3-2019 at 03:03 PM

Quote: Originally posted by dom cook  
Just a picture.



Heh, nice!!! Looks awesome. Perhaps this may be compatible with DIV TANK ARENA? gonna guess not but why not dream eh ;)

Quote: Originally posted by MikeDX  
I'm currently trying to get a working dev laptop running for DIV since my new mac is not even compiling without issue.

Once this is done, I'm going to try to get a system where you can upload a zip or a prg and assets and it will compile to a html page. This should have been done ages ago as compile as a service but it never got finished.


In regards to the laptop - how much are you looking to spend? If its a cash issue Id be more than happy to put a bit into a crowdfunded thingy like GoFundMe, I'll even set it up if it'd help. Maybe even stretch goals of getting those old hard drives of yours restored with our old games on - would be good to see my old attempts at games, I could do with a chuckle :lol:

dom cook - 20-3-2019 at 06:45 PM

Quote: Originally posted by BreadCaster  


Heh, nice!!! Looks awesome. Perhaps this may be compatible with DIV TANK ARENA? gonna guess not but why not dream eh ;)

Well if we could get something done at the dll level, who knows?
By the way check out these new better edges. Much smoother, I'm sure you'll agree. I'm trying a different technique which dispenses with draw commands and rather treats the periphery of the face as if it was actually curved. The green areas around the vertices need slightly different treatment to the edges. I'll do them next.

better edges.png - 5kB



As for the GofundMe suggestion, All I can say is genius! That is a great idea BreadCaster. Make it so. I reckon that if DIV was presented in the right way it would get a lot of interested. Even I would consider chucking in a fiver. You might want to consult Ahmok about the sales pitch. When it comes to game studio software, he really knows his shtuff and he's an articulate advocate for DIV whose interest in it can't be put down to nostalgia.

As for the old hard drive. I have a couple of masterpieces entombed on them which I would pay good money to get back.



[Edited on 20-3-2019 by dom cook]

dom cook - 21-3-2019 at 02:31 PM

Finally I've fixed the lights (really this time) In the process I've learned that there's truth in the saying 'Short cuts make long delays'
I had to rebuild the cube to allow for normal data and I had to create a light object. Everything I tried to change seemed to introduce more unfathomable bugs. I almost resorted to typing with an axe a couple of times, then suddenly it all fell into place.

Here are 3 images showing the light source (represented by the white square) in different positions. The nearer the centre, the higher the light. it's a little subtle but you can see that the edges and faces are now correctly lit with respect to this light. Not like the last image where some of the edges, although smooth, are way too bright.

lights.png - 16kB

Last but not least I need to do the corners. I'll have to figure that out in my sleep tonight.



Attachment: DICE321e.PRG (28kB)
This file has been downloaded 901 times

Attachment: RGB.FPG (512kB)
This file has been downloaded 925 times

Arrow keys move the light around. The light is directional so moving the dice won't affect how it is lit but, if you want to, you can move it into the middle with the mouse. To get the dice at a good viewing angle press _space a couple of times.

[Edited on 21-3-2019 by dom cook]

dom cook - 22-3-2019 at 06:27 AM

I'm on a roll now.

on a roll.png - 14kB


Attachment: DICE322b.PRG (26kB)
This file has been downloaded 910 times

MikeDX - 22-3-2019 at 03:23 PM

Dom can you check this please and see if this is what you expect

Not sure about any version other than html working, but we can make small progress as and when feedback happens

http://js.mikedx.co.uk/dice322b.html

dom cook - 22-3-2019 at 07:35 PM

Quote: Originally posted by MikeDX  
Dom can you check this please and see if this is what you expect

Not sure about any version other than html working, but we can make small progress as and when feedback happens

http://js.mikedx.co.uk/dice322b.html


It's fine except for the frame rate, at least on this computer. It's running at around 9fps. The fps is set in the code to be 24.

By the way good effort. When this built in player is working properly it will be a real asset.

MikeDX - 22-3-2019 at 07:45 PM

The framerate is a real problem in html due to the way javascript works as non blocking.

Its around 23fps on my mac, but that is one beast of a machine.

At least its something. I'm going to make a page where you can upload the prg as a zip (or point to a github repo) and it generates a html page

Work in progress...

CicTec - 22-3-2019 at 08:55 PM

Quote: Originally posted by MikeDX  
The framerate is a real problem in html due to the way javascript works as non blocking.

Its around 23fps on my mac, but that is one beast of a machine.

There are several aspects of the JS framerate problem...

First of all you have to consider which browser you use, for example Chrome and Opera are faster than Firefox and Mac's default browser as far as rendering and multimedia are concerned (firefox is the slowest).

Secondly, we need to consider the VM that run the JS code, some browsers run it faster than others (chrome is one of them).

Thirdly we need to see what kind of JS code is generated, being a game converted with emscripten (let's move from C -> JS) it is possible that you don't use some optimization levels like ASM.JS or the latest WebAssembly.

Finally we must consider pure rendering, DIV starts from a pure software base, according to the browser the rendering conversion/execution could be in Canvas or WebGL (or Canvas working over some WebGL), and according to the context it could give higher or lower framerate results.

Finally we find the dynamic nature of JS which as a language is naturally much slower than a C / Assembly code.

The dice have been cast.

dom cook - 26-3-2019 at 06:51 PM



To get the extra dice and not bring the fps into single digits (which was happening with just 2 dice), I had to reduce the quality of the images quite drastically. So then I shrunk the dice to 50% to hide the imperfections Not exactly satisfactory but, I think I actually prefer the look of these rough little dice. To my mind they're more suited to a DIV prg than any attempts at the fancy stuff.

dirtydice.png - 29kB



Anyway. This is as far as I'm taking this little project. It took a lot more effort than I was expecting it to and towards the end I got into a complete mess and ended up stressing. Still, at least it works and if I ever make a board game game I can use this.

Thanks for watching.


Attachment: DICE327.PRG (33kB)
This file has been downloaded 909 times


The graphics have been changed so this fpg is necessary
Attachment: RGB.FPG (493kB)
This file has been downloaded 934 times

[Edited on 27-3-2019 by dom cook]

BreadCaster - 2-4-2019 at 03:37 PM

it looks great Dom!!!! Say, i had a thought -

could you combine this technique with the vector 3d, by skewing the quads in a low resolution then blowing it up using something similar to the size variable - and mapping both of them to the same vertices? I mean itd be low quality but you could possibly use it to do somthing similar to what we saw in games like Elite 2.

Maybe even use the black space outside the vectors as a clipping mask and mask out the rough edges outside the vector 3d image? Just a thought/theory :D

dom cook - 2-4-2019 at 05:51 PM

I don't know really. At least the way I've approached things, I've concluded that all this texturing is asking a bit too much of DIV. So it's a bit of a dead end.

Having said that, It might be possble to make some sort of game using this technique if one settled for simple coloured polygons and it certainly wouldn't hurt if DIV had a filled triangle option in its set of draw commands.

BreadCaster - 2-4-2019 at 07:01 PM

flat shaded polys would certainly be the direction for this, yeah - it seems it should be easy enough to write such a command.... no idea how personally tho lol