Tutorial: Create a pre-filled bug reporter or a contact form for your games with Google Form

Introduction

In this tutorial we will create an advanced online form with notifications for your games with Google Form in few minutes for free.
This feedback form is compatible with Web games, Flash games, Unity games, mobile games, etc.

When a lambda player send you a message about an issue in your game you will love to know a maximum of details about the player device.
I’m sure nobody like to receive this kind of message:

2014/12/05 – john.do@myass.com – I cant play

OK! keep calm and reply with this common questions again: Hello, What is your device, the version of your OS, the name and the version of your browser, the language of your browser, the name of your grandma, etc.

A lot of people don’t know how to get all this informations so let me show you how to create a useful feedback form to get important informations about players devices.

Crate a form with Google Form

Google Form

  • Now rename the name of the Form to MyFirstFeedbackForm
  • Modify the first Question type to Text
  • Add the Question title: Email address
  • Tick Required Question
  • Done

Question title

  • Add a second question
  • Question title: Message
  • Question type: Paragraph text
  • Tick Required Question
  • Done
  • Add the third question
  • Question title: Version
  • Help Text: DO NOT MODIFY THIS ENTRY
  • Done
  • Add the last question
  • Question title: OS
  • Help Text: DO NOT MODIFTY THIS ENTRY
  • Add more questions if you need more informations from player devices. (language, browsers, OS version, device version, etc.)

All form

Add params to the URL of your live form

  • Click on Responses > Get Pre-filled URL

Capture d’écran 2014-12-05 à 17.54.03

  • Enter in the Version input text field “Version”
  • Enter in the OS input text field “OS”
  • Click Submit
  • Copy the pre-filed URL

You should get this kind of URL: https://docs.google.com/forms/d/1o_GUk-5fJS66xM9ONCkvGN4rKvrenLe17lz0zqzQUQI/viewform?entry.1008521465&entry.890117275&entry.1551109339=Version&entry.566074336=OS

Use you own IDs:

https://docs.google.com/forms/d/[ID_OF_FORM]/viewform?entry.[ID_OF_THE ENTRY]=[ANY_VALUE]&entry.[ID_OF_THE ENTRY]=[ANY_VALUE]

You can generate an URL to this live form inside your game to get additional informations about player devices. When players open the web page all additional informations will be pre-filled.

Notifications: Receive emails when players post messages

  • Re-open your Google Form
  • Click on View responses

Responses

  • Create a New Spreadsheet

New spreadsheet

  • Click on View responses again

View responses

  • You should see a blank spreadsheet
  • Tools > Notifications Rules

Capture d’écran 2014-12-05 à 17.26.47

  • Set a notification rules and Voilà! :)

Capture d’écran 2014-12-05 à 17.26.59

You are welcome to share your ideas to improve this Feedback form. :)

In the second tutorial I will show you how to get all device informations in Flash, Unity and iOS.

Kmembert – game developed in 17h – Post mortem – Ludum Dare 28


icon_200x200

PLAY KMEMBERT on LudumDare.com

Game description

Kmembert (Camembert: A delicious french cheese) is a puzzle/infiltration/action game :). The gameplay is quite simple: You are a cheese and you have to kill all nazi mice in one shoot. Get the cannon bullet and trick the mice in order to kill them all in a single shoot. 9 levels are playable. HAVE FUN ^^!

Capture_20131215_005Capture_20131215_003 Capture_20131216_005Capture_20131216_002

Post mortem

It was my first Ludum Dare compo. I just be informed of the event 4 days ago. My weekend was busy but I was motivated to create a simple game saturday morning with the theme “You only get one”. I already participed to the “Global Game Jam” twice, but the Ludum Dare is a different challenge.
I cumulate 17 hours of work for this game.

Gameplay

I found the idea in the first minutes: Get the only one bullet, trick the enemies to manage to kill them all in a single shoot.
The controls are simple and the top view allows to create less graphic assets and less code. I’m a big fan of “Metal gear solid” and I recently played “Hotline Miami”. So I unconsciously designed game mechanics with this game in my mind. I always wanted to design a game like Metal Gear Solid :). Therefore mice can run after you if they see you and you can play with the doors.

Level Design

I modified the mouse behaviours 2 hours before the deadline. So I redesigned the levels accoring the modifications.
I tried to design 9 levels with interesting challenge. I think the levels are fun and you also can understand all puzzles quickly. But I had no time to playtest the levels to another players. That’s why the game needs different mice with different behaviours and more balance.

Graphics

I didn’t want to use human characters, zombies, aliens or monsters. So I decided to imagine a coherent situation with uncomon characters according to the game mechanics. A humanoid cheese against nazi mice ? Why not  :). I’m not a 2d artist but I tried to design simple characters and animations quickly. A pen tablet is a good tool :).

Sounds

Unfortunatly I didn’t have the time to play on my guitar some cool riffs for the background music. The sound fx are just simple homemade sounds of my mouth :).

Tools

I’m a Flash game developer since 2004 so I create all assets, animations and code with Flash. I used the World Construction Kit library. It’s the Box2D physic engine with a WYSIWYG layout, very usefull to design levels. I also used simple libs : TweenMax, Flint. I used “Flash Develop” and I created some assets with Photoshop and Audition.

Conclusion

It was a great experience! Sometimes I watched streams of few developers around the world. I also earn some skills in code with box2d and in graphic design. I found my game interesting but it needs improvements :).

ActionScript: Tutorial How to create a gravity like a Mario platformer

In this little tutorial you will learn how to create a gravity like a Mario platformer.

Let’s start!

Get files

  • Save these 2 sprites (Right click > Save as)

  • Open Flash and create a new ActionScript 3.0 document.
  • Document properties: 24 fps, 550×400 by default.

Create the Hero MovieClip

  • Create a new Symbol: Insert > New symbol > MovieClip
  • Symbol name: Hero
  • Check Export for ActionScript
  • And Click OK

  • Now you are in you Hero symbol! Perfect!
  • Import the first sprite: mario_stand.png on the first frame:
  • File > Import > Import to stage > mario_stand.png
  • Set the sprite just on the top of the little black cross (pivot point)
  • Now create an empty keyframe on the timeline:
  • Timeline > 2nd frame on the timeline > Right Click > Create empty Keyframe
  • Import the second sprite: mario_jump.jpg on the second keyframe
  • Then create a new layer on the top and set 2 labels names
  • Insert > Timeline > New layer
  • And add 2 labels names:
  • On the timeline click on the first key frame with the mario_stand.png sprite and go to the Properties pannel > Label > Name > stand
  • On the timeline click on the second key frame with the mario_jump.png sprite and go to the Properties pannel > Label > Name > jump

Add the jump script

  • Back to the main scene: Click on the Scene 1
  • Add a new layer named “Actions”: Insert > Timeline > New layer
  • And open the Actions pannel: Timeline > Actions Layer > Keyframe > Right click > Actions
  • Finally copy and paste this code:

Download sources: www.benoitfreslon.com_Create_gravity_like_a_mario_plateformer

ActionScript: Move an object with keyboard with absolute controls

In this tip I will show you how to move an object with keyboard with absolute controls.

See also how to move an object with keyboard relative-camera control.

What is the absolute controls?

The direction of your object will be calculated depending the object orientation. (Biohazard, Micro Machines, Gears of War). This code is very usefull if you design a car game.

How to make an absolute control in Flash?

  • Get the arrow key status (key is up/key is down);
  • Move or rotate the object on enter frame with the new velocity (Left and Right keys: rotate, Up key: forward, Down key: backward);

Download source: www.benoitfreslon.com_Move_an_object_with_keyboard_with_absolute_controls

ActionScript: Move an object with keyboard with camera relative control

In this tip I will show you how to move an object with keyboard with camera relative control.

What is a camera relative control?

The direction of your object will be calculated depending the camera position. (Mario 64, Uncharted, GTA 3, etc.).
Eg: If press the right button the character will go on the right.

How to make a camera relative control?

  • Get the arrow key status (key is up/key is down)
  • Set the direction vector
  • Move the object on enter frame with the direction vector


Donwload source: www.benoitfreslon.com-Move-an-objet-with-keyboard-with-camera-relative-control.zip

ActionScript: Move an object to coordinates with smoothing

There is a simple formula to move an object to coordinates with smoothing.
The speed will decrease with smooth during the time.

speed = distance_between_objects / smoothing

The distance will decrease because the distance will decrease too.

If I set values I got:

object.x = 50
targetX = 100

speedX = (targetX – object.x) / 5

On the first frame: speed = 10
object.x += (100 – 50) /5 > 50/5 > 10
>
object.x = 50+10 = 60

On the second frame: speed = 8
object.x += (100 – 60) /5 > 40/5 = 8
>
object.x = 60 + 8 = 68

On the third frame: speed = 6,4
object.x += (100 – 68) / 5 > 32/5 = 6,4
>
object.x = 68 + 6,4 = 74,4

etc.

On the 100th frame: speed = 0
object.x += (100 – 100) / 5 > 0 /5 = 0
> object.x = 100 + 0 = 100

Source:

Exemple:

Download source: www.benoitfreslon.com Move an object to coordinates with smoothing.zip

ActionScript: Throw bullets to mouse direction

After calculating the angle of 2 graphic objects, you can also use this angle to throw a bullet to the object direction with the trigonometry.

How ?

  1. Calculating the angle (in radian) between 2 graphics objects with the Math.atan2 method (cf. Orient object to the mouse cursor).
  2. On click, display a bullet to the “tank” position and add an “enter frame” event on this bullet.
  3. And save the angle between the tank and the mouse cursor on the new  bullet.
  4. Use this angle on the “enter frame” event to calculate the x and y speed with the cosinus and the sinus.

Download source: www.benoitfreslon.com_Throw_bullets_to_mouse_direction.zip

ActionScript: Detect collision between 2 circles

With the Pythagoeran theorem you can detect collision with 2 circles.

You just have to get the rays of 2 circles with the width property divided by 2.
Actually the width property returns the diameter of the circle. So, you can calculte the ray like this:

ray = diamter / 2
ray = circle.width / 2

Therefore if you get the distance between the 2 circles you can detect the collision like this:

if distance < ( circle1.width/2+ circle2.width/2 ) is true => Collision

ActionScript: Get distance between 2 MovieClips

If you want to get the distance in pixels between 2 graphic objects just use the Pythagorean theorem in ActionScript :).

c² = a² + b²

Download source : Get_Distance.zip

ActionScript: Red Blood Cells behavior

Download: Blood.fla