What would you want in future HTML Dating Sims?

[TeineWolf]

I've spent some time, looking at the result of what the AC does, as game development progresses. Figuring out the mechanics of the games, and how they work. I've been thinking of possible solutions, of moving away from it, to help people make better games. Perhaps what I should do, is take what I think are possible solutions, and adapt them into the AC. So for me to do that, I'll spend some time delving into the AC if I can, apply those solutions into it.

My experience comes from UNIX scripting, and working between a live database, and sessional (cookies) variable, to work with flat (text) files.

[tlaero]

Maybe you should try making a game. The difficulty in game design doesn't come from the programming language.

Tlaero

[SYH]

...The nice thing about games that run in a single browser page is that they can retain state since all the javascript variables aren't wiped out between page views (here's a nice example, but watch out, it'll suck you in).

OT:

You weren't kidding! I spent five hours playing that game!

[TeineWolf]

Maybe you should try making a game. The difficulty in game design doesn't come from the programming language.

Tlaero

I suffer from a terrible affliction it's embarrassing. It's called Squirrelites.

I'll be working on a project, and something will click within that project, that I can apply to another project. So I tend to bounce from project to project. So when I come in here with an idea, it's usually from something I am in the middle of doing for work. I have a good idea what should work here, but I need to get to know the AC better to see what ideas can translate the easiest. With AC I am the dark, and your suggestion is something I've been musing with.

[TeineWolf]

When I get some time, I will try to figure out an example of what I am about to describe. Figured out the basics, but lack the skills to make the graphics to test it. Seen it in flash games, so when I find it. I'll recreate it HTML/Java.

When there's a scene where the hero, get's to kiss the prize. Usually you see a nice close up of the prizes cheeks, or lips, or neck, etc. In those cases, With a little manual tweaking. Could that image be placed in something conceptually like a <TABLE></TABLE>. Giving the table one cell, <TR><TD></TD></TR> an transparent animated gif. That runs once, as is just the see-through shadow of the hero, moving in to get his kiss. I've seen examples using HTML-CSS/Java, that look right. But without the animation aspect, being the overlaying image.

Basically overlaying one image over the other. Now I put it on paper, or screen. Could the graphic being used, be the animation it's self? Once you got the beauty shot rendered, animate it the overlay at than time. Then port the animation from the 3D software, to an animated gif. Doesn't have to be broadcast quality on the FPS, just enough to add a new neat effect.

[redle]

When I get some time, I will try to figure out an example of what I am about to describe. Figured out the basics, but lack the skills to make the graphics to test it. Seen it in flash games, so when I find it. I'll recreate it HTML/Java.

When there's a scene where the hero, get's to kiss the prize. Usually you see a nice close up of the prizes cheeks, or lips, or neck, etc. In those cases, With a little manual tweaking. Could that image be placed in something conceptually like a <TABLE></TABLE>. Giving the table one cell, <TR><TD></TD></TR> an transparent animated gif. That runs once, as is just the see-through shadow of the hero, moving in to get his kiss. I've seen examples using HTML-CSS/Java, that look right. But without the animation aspect, being the overlaying image.

Basically overlaying one image over the other. Now I put it on paper, or screen. Could the graphic being used, be the animation it's self? Once you got the beauty shot rendered, animate it the overlay at than time. Then port the animation from the 3D software, to an animated gif. Doesn't have to be broadcast quality on the FPS, just enough to add a new neat effect.

Not sure I fully understand your question. So apologies if what I say isn't related...

I know the 'kiss' scenes you mean, and obviously the thread title with 'HTML', so, we're playing a browser-based non-flash game. The player is reading his current page. The player clicks on something... now, are you trying to make a kiss animation play while remaining on the current page, or claiming you go to your new page, have a kiss, and then stay on that page with a non-kiss graphic, or something completely different? I'm assuming you're trying to do the 2nd.

The first problem I'll mention is single-pass animation and the web have inherent problems to begin with. Yes, they should work perfectly fine. The truth of the matter, however, is that lag and loading and other such things can actually cause the full animation to be played as it's being initially rendered (which means the player never sees it at all as only the last frame ever is fully shown). Only suggestions I have here are: hope the file is small enough and computers fast enough that this problem doesn't manifest, or put in a long delay on the first frame of the animation to increase the odds that everything is ready when it runs.

The second issue, it sounds like you want the kiss image to run its course and then vanish, so that another image in the exact same spot is seen through the first. While I'd say the positioning is doable, it will add some complexity to your page layout and you are likely to get different results from each different browser as to whether or not the vanish part works at all (not to mention if either image is supposed to be clickable, you could run into issues). What I'd consider the easiest fix to the whole thing, generate an animated gif for every scene the kiss is possible. Take whatever picture you wanted to have show through be your last frame. You only have 1 image on your page and you don't need to do anything special in the HTML. Depending on how many times you want to use the exact same kiss animation, it's a little more image work and increases your game's file size a little, but means the code base stays simple.

[tlaero]

AC gives you access to onmouseover, onmousedown, and onmouseup. With those you should be able to do anything you want with user started animations.

It's also easy to go to a new page when the animation is over.

Tlaero

[TeineWolf]

The concept I was aiming for is not an interactive element. When the player is interacting with the character, it's usually a medium shot (waist to head). Then they select the kiss option, say cheek. Then next shot is a close up, of the NPC's cheek, waiting to have a kiss planted on it. The idea was to add a opaque dark silhouette , that's supposed to represent the player. The animation consists of that silhouette coming into frame, parting the kiss, then retreating out of frame. I am trying to see is some of the tricks of Anime, might be able to help give the AC creators. Give them so new features to add to their ever growing arsenal of tricks, to keep the new games looking fresher.

I know the tricks have to be simple, but that's the beauty of Anime. They use a lot of little tricks, to make a simple animation look like there's more going on. I'll try and dig to find that game where I saw it. So I can deconstruct it, and them recreate it in HTML.

[tlaero]

How is it different than a normal animation?

Tlaero

[TeineWolf]

This would be animation, using an overlay. The standard image of the date, would actually become the background image. The overlay image would be the animated gif. There's a few assumptions I have to verify to see if it's possible. If the animated gif is transparent, how does that affect the opaque effect from frame to frame. Would the transparent region of the animated gif self, just remain transparent. Then if it does, does the opaque effect of the overlay work, with animation.

I've seen the overlay done, where it is static images. Where the regions of the background image, and overlay image overlap. There's a mix between the two graphics. It's just trying to use really old school animation. Where the background on the cartoon is a painted image, then a clear cell is placed over top, with the actual animation scene on it. Trying to see if the clear cell, can be replaced with animated gif, with a transparent background.

If the overlay works, then any game created forward. Can use the overlay, and add it to their generated image.

[redle]

This would be animation, using an overlay. The standard image of the date, would actually become the background image. The overlay image would be the animated gif. There's a few assumptions I have to verify to see if it's possible. If the animated gif is transparent, how does that affect the opaque effect from frame to frame. Would the transparent region of the animated gif self, just remain transparent. Then if it does, does the opaque effect of the overlay work, with animation.

I've seen the overlay done, where it is static images. Where the regions of the background image, and overlay image overlap. There's a mix between the two graphics. It's just trying to use really old school animation. Where the background on the cartoon is a painted image, then a clear cell is placed over top, with the actual animation scene on it. Trying to see if the clear cell, can be replaced with animated gif, with a transparent background.

If the overlay works, then any game created forward. Can use the overlay, and add it to their generated image.

One of the points I tried to make was that you can do exactly that with just a single animated gif. Making a static background image and an overlayed animated gif is just over-complicating things. Just like in a movie where the camera is stationary and therefore the room/background never moves and so only the person is 'animated', the standard image of the date becomes the background of the animated gif. Your 'overlay' then becomes the moving part of the gif. Rather than having the 'overlay' be transparent, you simply move the player off camera for the final frame. As soon as the animation runs its course, you are left with the last frame, which is just the room and the date (or whatever you choose it to be).

[tlaero]

Earlier versions of AC supported overlays, but, at the time, Firefox couldn't do them, so that blocked us. Even with browsers that worked, though, they turned out to not be all that beneficial. You had to use PNGs for the overlay (jpeg doesn't do transparent) and they were difficult to lay out correctly. They would work for games where the character isn't really in the scene (she's in the foreground and not interacting at all with the background), but better games have the character interact with the objects in the background (sit on the couch/bed, stand behind the bannister, etc).

The artists I know prefer rendering the scene (background and characters) together so they can play with the camera, etc.

Tlaero

[TeineWolf]

Sorry I kind started off making one point, then drifted into a second one as I was typing it. So I inadvertently crossed 2 mental particle streams.

The effect I was describing is a very simple anime trick, that could be crossed into HTML. The initial reason for doing the overlay method, was to keep it simplistic. Once there's a small shared pool of the opaque silhouettes. Once the actual game graphic is developed, ie: rendered and made into a jpeg. The program coder could select the appropriate gif/png sequence, to overlay onto the game graphic. Creating the animated affect of the user as a shadow, moving in and performing this kiss.

The reason I thought not to do it at the rendering stage, but i know it can be done. Was to remove the burden of rendering a scene, over rendering a graphic. It's would look very nice done in a 3D render, then exported to animated gif/png. But the idea is to keep it simple, but and a cute little detail to future games. That's one of the reasons people enjoy the HTML games, is each newer game, tries to add a new feature. I thought this might be a cute little addition.

In Anime, less is more. You don't have to animate a whole character. The body can bet static, but movements like breathing, or eye movement, looped right, create a more alive affect. When I find a game where I saw this, I will try to post the image. I've been reviewing a lot of them, so I forget where I see new features that I think might work with the AC.

[redle]

Your point is taken, that you think the kiss animation would be a nice addition for game devs to include.

I'll still stand by my statement though that it is simpler to render the 3d background image (you need this for the game anyway), take the stock 2D, gray-scale silhouette, and construct a single animated gif that combines the two into the desired effect. (It's simpler because when it is all one animation, the dev knows what the player will see. It is a bit of up-front work and then finished. When doing overlays there is cross browser testing, issues with who responds to mouse actions [the gif or the jpg], positioning issues, etc)

[TeineWolf]

Your point is taken, that you think the kiss animation would be a nice addition for game devs to include.

I'll still stand by my statement though that it is simpler to render the 3d background image (you need this for the game anyway), take the stock 2D, gray-scale silhouette, and construct a single animated gif that combines the two into the desired effect. (It's simpler because when it is all one animation, the dev knows what the player will see. It is a bit of up-front work and then finished. When doing overlays there is cross browser testing, issues with who responds to mouse actions [the gif or the jpg], positioning issues, etc)

Your point is taken, and noted, and the perfect solution. I should of thought that myself, but by knowledge of using programs like Photoshop/JASC-Paintshop is limited. I know layering could probably do that, but then I've never used layers before. I've been using Neopaint since DOS, and the newer version is very robust, for a novice like me. This is why I like this community, it's about helping people, and sharing knowledge.