Saturday, June 29, 2019

Spelchan.com Summer 2019

Blazing Games has been closed, at least the home page has. For the moment I am leaving the other pages up so if you know the link to a game then you can still go to the page. This will be eventually changing but I'm in no rush here. I produced a lot of Games so there is a huge amount of porting work to do. I have reviewed the  results of the poll and as a result have made changes to my release plans for this year.

Coffee Quest was released a month early. My holiday games seem to be slightly more popular than I expected.  For this reason I am going to make sure that I have holiday games ported as appropriate. This decision has me in the process of porting my Canada Day flag game for release this Canada Day (July 1st for non-Canadian visitors). Next year I will release my Independence Day game for my American friends.

I have decided that, in memory of my Mother, I am going to only release Color Collapse episodes on Mother's Day but do plan on creating related games once the remaining two episodes have been released. 

I noticed that the voting list of games missed some of the games that were already in HTML5 so those will become filler for when I am too busy to finish porting other games. The first of these will be Sudoku which will be released in August as my card and dice collection are very low in popularity. A beta of Coffee Quest 2  will hopefully be released this September with a Halloween game for October. November’s release is not yet determined yet and will be dependent on my time in September and October and I plan on creating a unique Christmas game this year.

I am not going to have any official release schedule for 2020 (other than a game every month) but do plan on showcasing the games I am working on in whatever game I am going to release in January. Hint, it will not be an updated Calendar NIM game this time.

So hopefully you will enjoy the site. Next fortnight I will start the next chapter of my Creating HTML 5 Games with Animate eBook so hope you continue reading.

Saturday, June 15, 2019

Final Touches

As is quite often the case with my games, the last part of the game that is created is the title screen. The first part of the title screen is the game's logo. My One of the Weeks logo is not really appropriate, even though this game is part of that series, so to make this a stand-alone game I created a new logo. For the start button, I opted for a door as that is emblematic of the game play. As always, the code to control the button is very straight forward.



spelchan.Nightmare.prototype.startTitle = function() {
this.playButtonHandler = this.playButtonClicked.bind(this);
this.stage.playBtn.addEventListener("click", this.playButtonHandler);
this.stage.stop();
}

spelchan.Nightmare.prototype.playButtonClicked = function(e) {
console.log("Play Button Clicked!");
this.stage.playBtn.removeEventListener("click", this.playButtonHandler);
this.stage.gotoAndPlay("Intro");
}

One problem that I had with the game at this point was the fact that someone who started playing the game without reading the instructions would be totally confused by what was going on. While confusion may actually add to the story, it can also turn a lot of people off the game. As this is the first episode of a series, one thing I don't want is to turn people off the game.

While I would like to think that people read the instruction pages that I put a some effort into creating, the reality is that a lot people just start playing the game.

One solution would be to have a link to the instructions on the game's title screen. The problem with doing this is that the people who skip over the instructions page are likely to not bother clicking on the instructions button either. This means that I would end up putting more time into creating the instruction pages - which is more time consuming then writing an instruction page - which few people are going to read. This is obviously not a good solution.

The solution I did for this episode is to incorporate the background portion of the instructions into the game by starting the player at an explanation screen. This is simply a looped animation of the text bubble growing then shrinking. The code for handling the button is also very simple.



spelchan.Nightmare.prototype.setIntroButton = function(e) {
this.introButtonHandler = this.introButtonClicked.bind(this);
this.stage.con_btn.addEventListener("click", this.introButtonHandler);
}

spelchan.Nightmare.prototype.introButtonClicked = function(e) {
console.log("Intro Button Clicked!");
this.stage.con_btn.removeEventListener("click", this.introButtonHandler);
this.stage.gotoAndPlay("enterRed");
}

And that is all there is to the game. Next fortnight we will look at changes to my Blazing Games porting plans and next month we will start chapter 7 which sets the foundation for the creation of video poker.

Saturday, June 1, 2019

Losing and Winning

In the previous section we introduced the BSoD. This leads to the problem of what to do when the player loses the game. My first thought was to have the BSoD claw the player to death. This would reflect the feeling you get when you have an hours worth of unsaved work and the real blue screen of death shows up. Not that I’ve ever had that happen to me as I always save my work frequently. Mind you, the reason I always save my work frequently is because of learning what losing hours of work because of a computer crashing feels like.

Having someone being clawed to death is not really appropriate for a family friendly game so instead, I decided to have a bit of fun and generate a nice error message.



There is a button on the screen which returns the user to the title screen that we will be creating in the next section. To have the button do something we have a method in our Nightmare class for dealing with returning to the title screen. This method is called using nightmare.registerTitleButton(this.losecon_btn);

spelchan.Nightmare.prototype.registerTitleButton = function(btn) {
console.log("registering toTitle called! " + btn);
this.toTitleButton = btn;
this.toTitleHandler = this.toTitle.bind(this);
this.toTitleButton.addEventListener("click", this.toTitleHandler);
}

spelchan.Nightmare.prototype.toTitle = function(e) {
console.log("toTitle called!");
this.toTitleButton.removeEventListener("click", this.toTitleHandler);
this.stage.gotoAndPlay("Title");
}

This code simply sets up a button that is passed to it to call an event handler that simply returns the game to the title sequence.  To remove an event listener, however, you need a link to the event that is to be removed. Binding objects end up creating something new so to properly remove the event handler we need to keep a reference to the binded version of the handler. The actual handler code simply uses this binded reference to properly remove the event handling reference and then goes to the title sreen frame.

Now that it is possible to lose the game, perhaps it would be nice to allow the player to win the game. The winning scene was designed with two purposes in mind. First, as a distinct way of showing the player that they have completed the game. Second, to preview the next episode of the game. The number 666 has certain significance with my upbringing and to this day I still consider that number to be a bad omen. As you can't have that number on a clock, at least not legitimately, I opted for 6:36 for the time. The code for handling the “To be Continued...” button, as with the lose screen, is simply a call to nightmare.registerTitleButton(this.wincon\_btn);


Now we just need the title and intro screens and we are finished.These will be completed next fortnight which will conclude this chapter.