programicks

Hi NXTaar. I am unsure I understand what you are attempting to do. For a point and click, say the red zone is to check if you clicked on the floor, then the character can move. You only need to check for the red colour of the floor once when you click the mouse. If you don't click on the red zone, you have not clicked the floor and the character cannot move. You can of course then use a different colour for an interactive hotspot like an object to collect. The way I do it, is to have all the different colour hotspots in one png. About loading the two separate images, yes, you will need to draw the png, do the checks, then draw the background or have two canvases for this. I don't know how to do this in Phaser though. Can you not load the two images in function preload then in the function update (), of Phaser can you draw png, check, draw background at this time?

Just realised, I should google phaser image data and a-ah, found this: https://phaser.io/examples/v2/bitmapdata/get-pixel This may be of some use to you. Infact I will look at this later myself lol.

My word, Phaser doesn't have anything built in to get getImageData? If not, they should. For my Point and click engine (sorry, not Phaser - built it before I knew about Phaser): I draw on canvas a png of the hit area like your red floor, then use getImageData to check its rgb colours and check if they match for the mouse over. Then I draw the room jpg over the top. Just only check the imagedata once on mouseover for mobile browsers or it drops the frame rate by half. Fine on PC though.

Please see this post: This works on mobile devices tested on several mobile browsers.

When I edit my post, I choose Javascript but the code snippet is still showing in black and white. I thought this was colour-coded? *edit* now showing in white and yellow after refresh :-)

The following code for using the audio element complete with playing several sounds at once I have recently tested and works in a number of mobile browsers including chrome mobile, firefox mob, cm browser, dolphin. //sounds var _f15416917 = 0; var div = document.getElementsByTagName('div')[0]; var sounds_div = document.createElement("div"); _sounds_div.setAttribute("id", "_sounds_div"); _sounds_div.style.position = "absolute"; _sounds_div.style.width = "580px"; _sounds_div.style.height = "100px"; div.appendChild(_sounds_div); document.getElementById('_sounds_div').innerHTML = "<audio id='music_3' preload='auto' loop>"+ "<source src='./assets/sounds/music.mp3'>"+ "</audio>"+ "<audio id='sound_1' preload='auto'>"+ "<source src='./assets/sounds/sound_1.mp3'>"+ "</audio>"; var _music_3 = document.getElementById('music_3'); var _sound_1 = document.getElementById('sound_1'); //check if loaded _music_3.addEventListener("canplaythrough", function() { }); //check if loaded _sound_1.addEventListener("canplaythrough", function() { }); //when ready to play sound, use this: //_music_3.play(); var touchzoneS = document.getElementById("canvas"); touchzoneS.addEventListener("touchstart", __drawS, false); function __drawS(evvS) { //play and stop all sounds to be used on touch so they will work in mobile browser if (_f15416917 == 0) { _music_3.play(); _music_3.pause(); _sound_1.play(); _sound_1.pause(); _f15416917 = 1; } } The code above assumes you have a div in your html file with your canvas inside. Also, change the var touchzoneS = document.getElementById("canvas"); to match the id of your canvas and obviously things like the source mp3 links.

Hi. Thanks for the answer, yes, I was just thinking about using an array for the rest of my images rather than just the hero and inventory images that I do now but I will take a look at your code.

Hi. I was testing to see if I could use the following code to store new Image() in a variable and use it for several images. var _new_image = new Image(); var _image_1 = _new_image; _image_1.src = "./assets/views/image_1.jpg"; var _image_2 = _new_image; _image_2.src = "./assets/views/image_2.jpg"; var _image_3 = _new_image; _image_3.src = "./assets/views/image_3.jpg"; So each new image created uses the _new_image variable instead of new Image() . But, of course, this isn't working. Only one image will load. So I was wondering if I can store new Image() in a variable and what the syntax/code would be to do this. Thanks.

Hi. Could you not build in a trap where, if someone goes through your code, gets the links to the images and reconstructs your game (folders and files) in order to copy it then alter it. You could use getImageData to check the pixel colour that you know will be say, the top left pixel of a certain image. Then, if someone alters that image (say, the hero), your pixel check will return the wrong colour. Only let the game run if the correct colour is picked? This would only really work with minified or obfuscated code or easily spotted. Ok, the tamperer could, if they figured out the trap, remove the getImageData trap code but you could make your trap unique with 'several' layers of pixel data colour checking or something (overlay transparent colour and check again)? If they get rid of 'all' the pixel data checks, you might use some for non trap getImageData code to make the game work and then the game will not work properly.

Hi. I am working on an html5 point and click game at the moment. Since hotspot areas to click on can be all kinds of shapes, I use 'getImageData' on a png with different colour areas for each hotspot which is drawn first before the main view is drawn. I use photoshop to show the main image and can then easily draw the different colour shapes on a new layer over the image to see where the hotspots go. Ok, there is 'isPointInPath' but I find it easier to do the above than code the drawing of the canvas shape. I don't know if there are game engines that will allow you to draw in odd shape click hotspots but you may prefer to use the game engine. It's just, I started doing my coding by hand and got used to it this way. In fact, I would argue that coding by hand is just as fast. Get postions using mouse x and y then type figures in the js. When you load your game in the browsers, you know what you see is what you get. Mike.