Looking for someone with HTML5 Skills.

[davori]

Hello guys,,

title says it all. I hope someone can help me.

Greetings.

[MaxCarna]

Hi Davori,

You need a punctual help or somebody to team up?

My game is made with HTML5, also boostrap and Angular 2, If I can help.

[davori]

Hi MaxCarna,

for now i just have a few questions. I creating a renpy game and after spending already an amount of time it doesn't feel like it is what i want to do. I totally miss the interactive part like in sharks games or the pussoy games.
As far as i know (correct me if i am wrong) both use flash for their games. So i decided to do some research and most people say that flash will die sooner or later (round about 2020 or a bit later) because of html5.
With my first attempt to build a game i landed totally on my face a few years ago so that's why i want to make sure to not do the same mistaked even when i never publish a game.

My question..is html5 able to do games like that or should i try to learn "flash"? That's right now the most important question.

For example.. pulling down pants with the mouse or moving the body up and down or backwards and forwards etc..

Greetings

[Greyelf]

... most people say that flash will die sooner or later (round about 2020 or a bit later) because of html5

Adobe (the makers of Flash) themselves have stated that Flash is being discontinued and recent versions of some popular modern web-browsers either: don't come with an extension for interfacing with the Flash run-time (so you need to install such an interface yourself); or they come with such an interface extension but it is disabled by default.

Adobe have a new product named Adobe Animate which is meant to be their successor for Flash (and more), it does that by producing HTML5/CSS/JavaScript related code.

For example.. pulling down pants with the mouse or moving the body up and down or backwards and forwards etc..

You can do all those interactions (and the accompanying animations) using JavaScript and HTML5's Canvas element.

[tlaero]

You should definitely not do flash. HTML5 is totally fine. The things you're describing are really just simple animations, and those can be done in anything, including HMTL5. If you've ever played any of my games and would like an easy way to make games like them, you're welcome to use my AdventureCreator tool.

Tlaero

[MaxCarna]

My question..is html5 able to do games like that or should i try to learn "flash"? That's right now the most important question.

Don't waste time with Flash.

This site is a nice place to start: https://www.w3schools.com

Some things you may would like to check:
https://www.w3schools.com/css/css3_animations.asp
https://www.w3schools.com/w3css/w3css_animate.asp
https://www.w3schools.com/angular/angul ... ations.asp

And I wouldn't ignore Tlaero's advice, here is the tool: viewtopic.php?f=30&t=3678

[davori]

Thank you very much for all the answers. Thanks to you i try my luck with html5.

@Tlaero
I played and enjoyed all of your games. You are truly amazing in what you do. Your tool is amazing have tried it for a short time but it's not what i am looking for. Like is said with renpy or rpg maker. A lot of good games outside and kinda easy to use but not what i am looking for.
If i should be succesfull with and publish my first game i will as a tribute create one with your tool and a sidecharacter named tlaero. With your permission of course

@Greyelf
Ah ok so it is official now. Thank you.

@MaxCarna
Thank you for that website. Will defintly come in handy.

I have basic skills in html and css. Years ago i created a Website but it was basic standard and no javascript.

[davori]

@MaxCarna

After a few hours now of try and error, reading, youtube videos and so on.. i hope you can help me.
i created html,js and css document and also managed to load a picture into the canvas.
But how do i can change the picture the picture on the canvas over and over again on every click.

i am pretty sure it is with the onclick function but every method i saw that other tutorials or whatever used my script would be like 50kilometers long.

What would be the best way for our type of games to do that?

I thought about using div containers for the speechbubbles inside the canvas but how do i let that text appear in the right picture? like speech bubble number 4 on picture number 4?

do you have any idea ? or maybe someone else?

greetings and goodnight 2am here in germany.

[Greyelf]

WARNING: The following example is NOT meant to be a demonstration of the best way to achieve the desired result, nor the best way to handle a list of images.

re: Change image being shown in a Canvas when mouse is clicked on it.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Change image in Canvas on click.</title>
   <style>
      #canvas {
         background-repeat: no-repeat;
         width: 100%;
         height: 100%;
      }
   </style>
   <script>
      var images = [
         "4827/nature-forest-trees-fog.jpeg",
         "302804/pexels-photo-302804.jpeg",
         "240040/pexels-photo-240040.jpeg",
         "38136/pexels-photo-38136.jpeg"
      ];

      function changeImage() {
         /* Show the first image in the queue on the canvas ID'ed element. */
         document.getElementById("canvas").style.background = "url('https://images.pexels.com/photos/" + images[0] + "')";

         /* Move the first image to the end of the queue. */
         images.push(images.shift());
      }
   </script>
</head>
<body>
   <!-- The empty canvas to show the images in, it monitors for click events on it. -->
   <canvas id="canvas" onclick="javascript:changeImage();"></canvas>

   <!-- The canvas element should exist by now so show the first image in it. -->
   <script>changeImage();</script>
</body>
</html>


[davori]

Thanks a lot Greyelf, i will give it a try.

[MaxCarna]

Sorry Davori,

I was looking for a very simple code that have a candle on and off, but I wasn't able to found it.

I believe that Greyelf code will work.

If you have just 2 images to alternate, basically you can set the OnClick event with a simple variable, something like:

if (lightOn == true) {
document.getElementById("canvas").style.background = "candle_out.jpg";
lightOn = false;
} else {
document.getElementById("canvas").style.background = "candle_on.jpg";
lightOn = true;
}