However, in the past 24 hours I have discovered a hidden element of construct called “behaviours” – This means that you can set objects to do certain things. While I have been using the software there have also been updates in terms of the actual Construct program which I have had to download and install. It now appears that during one of those updates, a feature specifically for drag and drop has been introduced.

What that means for me, is that I can do away with all my earlier code. While many might consider this wasted time, everything I have done on this project has been a learning curve and I’m happy to say that now we’re nearing the end of the process I’m very pleased with what is coming out of Construct 2.

After all, the new element of drag and drop will clear my coding, thus making the game run faster and furthermore it solves the problem of the user dragging too far and too small an object so will hopefully help the game to run quicker in .apk format on tablets.

I’ll post again in the next few days once I’ve made the changes and any effects they have had!

I achieved this returning feature by recording the X and Y position of each element at the start and transposing these to variables set within the object from the moment it is dragged. Then, when dropped at any location that isn’t the right one the object returns to the position determined by these variables. It’s pretty simple when you think about it. When you go on to solve the next problem, you think perhaps that at the same time as the object returns a speech bubble could pop up showing “Wrong Answer,” or something like that.

This is the final code I ended up with for each element, it allows the wrong answer to show at the correct time.

As you can see from this example, the way in which I’ve achieved the return is to have the system element constantly checking where each object is and if it’s not over the right answer, then it returns to the start position and the “Wrong Answer” displays. Of course, I realised later that this expression is wrong because apart from when it is dropped over the correct answer, any element is always going to be NOT over the correct answer. That in turn means that the bad answer will be showing all the time.

For a long time I couldn’t think about how to solve this problem. Sometimes with coding you have to take a step back and think about something else until the answer comes to you. I spent that time working on my R and D file and was able to make good progress. The past few days have lead me to find an answer to my earlier problem.

The object doesn’t return if it’s over the correct answer. Therefore, in order to make the wrong answer show at the right time, all I needed to do was duplicate the Frankestein body where objects are dropped and the mirror where they are kept from the start of the level and rename them. Then If I were to place them over the original body and mirror and set the opacity to 0, I can define that the bad answer shows only when the object is dropped over the now hidden “Frankenstein2.” At the same time, If I set a “when touch ended” expression I can ensure that the system waits until the user actually drops the object, before showing the bad answer.

Pleased that I have solved this earlier problem, I can now set about adding the final touches to level one. This same idea will work for showing the correct answers too, and leaves me free to spend next week working on my level 2 design.

After taking a step back from that idea, I realised that it was very similar to the way level one worked and users of the app might be get bored quite quickly with that set up. The second Idea that I had was to create some kind of maze game. Now with this idea, the player would need to navigate their way around a maze with their finger on the player to drag him to where they need to go. Within the maze there are several good foodstuffs and bad foodstuffs which the player will come across. The idea is that the user will get out of the maze in the quickest time and find four healthy foods along the way. If they choose the bad foods they loose a life and a portion of their score.

The charecter for this second level of the app, will be Count Dracula (continuing the Frankenstein charecter theme) and the user will have to guide him around the maze to find the foods of their choosing. I wanted to create some kind of a link between levels one and two and decided that the character would be the best way to do this!

In order to think more about my design for level two, I considered different kinds of maze games. I found these examples online of the kind of structure I would be aiming for.

   

This shows the look that I would be going for, and a similar idea for the user too. Here the user has to catch a number of cats, where as I'll be asking them to find foods.

That’s what the app is looking like right now. I’ve spent most of the weekend working on the design for the interface and any problems that came up with the images I’d drawn out in sketch form earlier this week.

The first thing I had to do, was to scan in all the images that I’d drawn by hand and recreate the charecters of Doctor Frankenstein and his monster in flash. Having done this quite quickly, by using curves, lines and fills, I started to get an idea of the style I wanted for the game. As I previously mentioned I wanted it to look a lot like the “Angry Birds” app, mainly because that app is colourful and inviting to children and adults alike.

With this in mind, I wanted to create some bold images and styles which might reflect this kind of design. I’m very happy with what I’ve reached above, however I had to overcome designing the table in an isometric way, even though my software does not support 3D. That caused quite a problem when bringing in the monster, as he can’t sit straight on. However, with him being bigger than the doctor he can almost sit on the edge of the table and still seem quite realistic.

For a time, I had a problem with the designs I’d created. What was happening, was that I’d created what I thought were larger images in flash and when I came to export them as .jpgs they were ending up really small. It took me longer to work out how to export as jpg at the right size than to create the origianal images. That suggests to me that in future I won’t be using flash to design!

In this shot you can see the game without the monster present. It’s easier for me to point out my initial problems with the images. Because they were coming out so small, the lines of each body part and the professor were more or less undefined. Some of the elements faded into the background and the proffessor didn’t look real. I’d put a lot of definition into things like the large intestine and it wasn’t showing up. With that in mind I went back into the flash file and changed the weight of each line up by five strokes. That gave me a lot more definition and made the images look cleaner.

This final screenshot, shows the game software when I was positioning and trying to work out what I would do with the monster. It’s nice to have a design interface (being more of a designer myself) when working with elements like the design of the app and how it looks. It’s my plan to work on the first menu and splash screen tomorrow before moving onto more work with level one and level two.

Here's an example of a boolean value in Java Script, the kind of raw code that goes into my drag and drop feature.

About a week ago, when I was still working on the drag and drop feature on my game I realised how important it is to check for simple errors in the coding. Using a series of tutorials and forum posts on how to craft a drag and drop inventory in Construct 2, I coded each of the elements so that they could be picked up and dragged.

The next problem with the coding that I had to overcome, was making each of the elements which are dragged, return to their original position when they’re not dropped in the right place. So if a body part is dropped on the wrong place in the body, it automatically jumps back to the inventory so that the user can have another go. Similarly if the body part is dropped over empty space, nowhere near the body the same thing would happen.

Using a boolean value to determined whether the drag was on or off, (on if clicked on and mouse button held down, off if not) I coded a return to the same location as on start up. So when drag is off, and the element is not over a correct landing point, it will return to the original location. This was a nice and easy way to ensure each element returned when not dropped in the correct place and it avoided a lot of complicated coding. Effectively in the background, the system will constantly be checking if drag is off and noting where the element is at any specific point. I can set the correct drop points and the system will do the rest.

When I ran the game / app to test what I thought was the completed drag and drop feature, I realised that while the drag and drop worked for some of the elements the coding was almost working in reverse. While the brain dropped and returned just as I wanted, the other elements seemed to return when dropped over a correct drop point and stick when anywhere else. I couldn’t work out why for the life of me this was happening and went back to the code to try and work it out.

Being unable to see why the game / app was throwing up this kind of malfunction, I took a few steps back from the project and worked on my sketches for the design and layout of the app. When I came back to the coding aspect this afternoon, I noticed a simply flaw with the things I had coded. Each piece of code in Construct can also be reversed, giving you a whole new world of coding options, so you can have when left mouse down and in the same way when left mouse not down. To do this, you simply add an inverse symbol the code layout for that expression. What had happened with my drag and drop, was that for the brain I’d set that inverse and on the other elements I hadn’t. That was the only reason for the drag and drop not working for every element!

Solving this problem taught me to look out for the simple errors in coding that might hinder my process. While this was a relatively easy problem to solve, it wasted a lot of time that I could have put to better use on other parts of the project. From now on I will remind myself to recheck everything I’ve done at the end of a coding session, making sure that all the expressions and variables are correct.

The first image I created was this layout of a human body (outline only) and some main body parts (heart, lungs etc. etc.) which I will use to make the first evolution of the app, a way of testing the drag and drop features.

I’ve also done some sketches of the way in which the final app with look. Taking some inspiration from the popular app “Angry Birds,” I will look to make my app as asthetically pleasing as Angry Birds is. I think one of the big sucesses about Angry Birds, is that it’s not only simple but it also looks good. The app has some kind of shine that makes it stand out and to a certain extent jump right out of the screen when you start to play. It makes you want to continue playing.

Here’s an example of how I’d like the first level to look, the other levels of the game (of which they’ll be four) will be a variation on this theme:

Here you can quite clearly see how the game / app would work for school children interested in using it. The layout and design should be interesting to them and at the same time educational. It’s likely that the professor character will be animated in some small way to give some additional movement to the project.

]]> http://www.digitalmedia.benatkinson.org.uk/?feed=rss2&p=401 0 http://www.digitalmedia.benatkinson.org.uk/?p=413 http://www.digitalmedia.benatkinson.org.uk/?p=413#comments Sat, 04 Feb 2012 11:30:21 +0000 Ben Atkinson http://www.digitalmedia.benatkinson.org.uk/?p=413 read more »]]> Last night, I worked on coding the main frame of my finished app, the drag and drop features. In Construct 2 I found tutorials and work from other designers who had created drag and drop features to work out what events I needed to happen and the click, hold down and release of the left mouse key.

At first I just used a variable called “dragged” and set it to zero or one depending on whether the mouse button was clicked. So, if the the left mouse button was clicked on the heart for example, dragged would change to one (or positive) and then if left mouse button is held down and dragged=1, the heart element would lock to the mouse point. Then if the left mouse button is released, the variable dragged is returned to zero and the whole process can start again. That processed gave me something like the image you see below, however it wasn’t a full-proof solution as I noticed the elements collided with each other and I worked out that the coding was messy and some of the elements were reading code from other elements instead of being stand-alone.

The first test of the drag and drop features in my app, as you can see the elements were colliding and the Human Body on a desk was suddenly replaced with a second instance of the kidney (the body part I was dragging at the time).

To solve this problem with the elements colliding, reading the wrong code and reproducing themselves, I turned back to the tutorials provided with Construct 2, to work out what other options were available to me when coding a more full-proof alternative. I noticed that any coded instance (such as on left mouse click) can be inverted to do the opposite. So, “on left mouse click” becomes “on left mouse release” and this gives Construct so much more flexibility. I also decided to create a boolean value, one which can either be true or false. So dragged became true or false (on or off) depending on if the mouse was clicked and held down on any element. Of course I still coded the element to move with the mouse cursor, but for added security used a variable checker to ensure that the boolean variable was true before any dragging happened. And then, as you might expect, when the mouse button was released the boolean value became false again and the process can start all over again.

That might sound complicated, and it is a lot of code for a simple drag and drop. However, much of this is the same code repeated for each element and is essential to the main frame of my app, so once I’ve got this part of the coding confirmed I’ll have a lot more time to work on the layout and the other coded elements. Here’s the code for the drag and drop:

As you can see, quite a lot of coding goes into a simple drag and drop feature.

The next thing I had to do, with my drag and drop feature now working, was to think about what would happen if any of the body parts were dropped on the right or wrong part of the human body. This was the second most important element to my app and I came up with the idea of creating a number of small square objects (the same colour as the body itself) which would then be unseen on the actual body and if any of the elements collide a certain line of text would display. I created two lines of text, one for the right answer and one for the wrong, and set about working with the brain (it being place on the head, or in the groin region.) In Construct 2 you can toggle visible on and off, so I created a system element which set both texts off at the start of the app, and then if the brain was dropped on either area of the body, I set either the right or wrong text to display. I then thought about how I could get rid of the text, and decided to set another system element to wait five seconds before making the text invisible again so the process can start all over. Here’s the coding for that:

Here you can see my code for the visible and not visible text depending on where the brain is dropped.

So, having coded a very rudimentary version of my two key elements, I’ve gained the knowledge of how to set up a drag and drop feature and also learned what works and what doesn’t. In future, I’d try to use invisible elements to make the drop locations as you can see the pink squares, and think of a different way of showing the text and the visible and invisible isn’t totally reliable. If you want to have a go, here’s a demo of the basic features I created last night. Drag and drop the brain onto the head and the groin to see what happens: