function copyToClipboard(item) {

    document.addEventListener('copy', (e: ClipboardEvent) => {

      e.clipboardData.setData('text/plain', (item));

      e.preventDefault();

      document.removeEventListener('copy', null);

    });

    document.execCommand('copy');

  }

   1.in normal script add an event who call a function and declare a var currentInput

document.addEventListener('keydown', thefunctioncall) ; var currentInput: string;

   2. In the fuction

function thefunctioncall(event: KeyboardEvent)
{ currentInput = event.key } // you can use keycode if you want number

3. in an update of a behavior just check what is press

update()
{ if(currentInput = "s"){Sup.log("you go down bro !")} }

4.Whit some work allow the player to choose the command he wish :D

By ussing a tab for exemple...

5. Be happy and send me money to iamamanipulator@devilinside.com

or just be happy.

Here is another really quick episode showing off a new character sprite that I made just to show the direction of the player through animations. This is just a really simple and easy tutorial with a very simple sprite I had made. Also I am not sure if I should be posting every single tutorial video on here or not but I think its a lot easier for people who need them to find them. If any admins have a problem with it please let me know :) Also I plan to upload more tutorials very soon.

Let me know what you beginners want to learn and if your having any trouble.

In this tutorial I go over a quick way to make the camera follow around the player as they move. Mainly because keeping the camera parented to the player is really stiff gameplay wise, and this is really easy to learn how to do. Been a while since I made a video but now since it's summer you can probably expect more. I also apologize for the bad audio quality.

Take note of the fact that I literally just downloaded this tool. This is pretty much the first screen I've seen, and it shows up every time I double click one of my servers or open a new one.

So... halp?

My plan is to provide a tutorial series of game development process as my learning go and to share my adventures in Superpowers with the community.

Of course I am always eager to learn and this tutorials can always be improved, this is why I stick to the open source philosophy of the community and let anyone open issues and fix the tutorials to allow everyone to adopt them.

Two ways to help, you can address in this tutorial post your problems, propose change and ask for tutorial clarity. Or if you feel comfortable with that, you can open an issue on github or even can improve the tutorial directly by submitting pull requests for the markdown files in the github repository.

Please, don't hesitate to say if you find mistakes, missing elements or unclear steps as it would help to improve this tutorials aimed to the Superpowers community. (Also, I am not an english native then don't think I would feel offended if you report my grammar and style with the language, I could improve this part too.)

Thank you and have fun making games ! :-)

• SUPERPOWERS TUTORIAL #4 Super Asteroids and Super Spacewar : (+ mod Starcastle)
  • read gitbook tutorial --- play the game --- source assets --- source project

Note : you can download zip for sources here.

This just covers some polish of the game along with creating an FPS counter along with some mouse interaction.

If you have any questions or any ideas on what I should do next please let me know.

I just published a 2-part tutorial on youtube covering... well, basically everything I just said in the title.

I hope you find it helpful!

CLICK HERE TO VISIT THE YOUTUBE PLAYLIST

Is it possible to create a sprite directly into a script ?

I have lot of images and I want load just one (randomly).

thanks.

Sup.ArcadePhysics2D.setGravity(0, 0);
class PlayerBehavior extends Sup.Behavior {

//stores the idle state to transition to when player stops pressing a key
public currentIdle: string;
//How fast the player can go
public _maxSpeed = 0.1;
//The acceleration rate
public acceleration = 1;
//How fast he decelerate
public _decelaration = 0.002;
//Current speed
private _speed = 0;


awake() {

this.currentIdle = "Idle_Dwn";
this.actor.spriteRenderer.setAnimation(this.currentIdle);
}

update() {

Sup.ArcadePhysics2D.collides(this.actor.arcadeBody2D, Sup.ArcadePhysics2D.getAllBodies());
let velocity = this.actor.arcadeBody2D.getVelocity();

if (Sup.Input.isKeyDown("LEFT")) {
// Move the current behavior's actor by a small negative offset on the X axis
//Trying to implement inertia
velocity.x = -0.3;

//Sup.log(`Actor ${velocity}`);
//Sup.Math.clamp(this._speed,0,this._maxSpeed);

//this.actor.move(new Sup.Math.Vector3(-0.1, 0, 0));
this.actor.spriteRenderer.setAnimation("Walk_Left");
this.currentIdle = "Idle_Left";

}else if (Sup.Input.isKeyDown("RIGHT")) {
// Same but positive to go to the right

//velocity.x += this.acceleration;
//Sup.log(`Actor ${velocity}`);

//this.actor.move(new Sup.Math.Vector3(0.1, 0, 0));
this.actor.spriteRenderer.setAnimation("Walk_Right");
this.currentIdle = "Idle_Right";
}else if (Sup.Input.isKeyDown("UP")) {
// Move the current behavior's actor by a small negative offset on the X axis
//this.actor.move(0, 0.1, 0);

//velocity.y += this.acceleration;

this.actor.spriteRenderer.setAnimation("Walk_Up");
this.currentIdle = "Idle_Up";
}else if (Sup.Input.isKeyDown("DOWN")) {
// Move the current behavior's actor by a small negative offset on the X axis
//this.actor.move(0, -0.1, 0);
//velocity.y += -this.acceleration;

this.actor.spriteRenderer.setAnimation("Walk_Dwn");
this.currentIdle = "Idle_Dwn";
}else
{
this.actor.spriteRenderer.setAnimation(this.currentIdle);
}


}
}
Sup.registerBehavior(PlayerBehavior);

I wanted the player to be able to move on a top down perspective, but it won't move on any direction at all

Sup.ArcadePhysics2D.setGravity(0, 0);
class PlayerBehavior extends Sup.Behavior {

//stores the idle state to transition to when player stops pressing a key
public currentIdle: string;

//trying a different way to go about managing the animation to play
public currentAnimation : string;
//How fast the player can go
public maxSpeed = 0.15;
//The acceleration rate
public acceleration = 0.007;
//How fast he decelerate
public decelaration = 0.0085;
//Current Velocity
private _velocity:Sup.Math.Vector2;


awake() {

this.currentIdle = "Idle_Dwn";
this.currentAnimation = "Idle_Dwn";
this.actor.spriteRenderer.setAnimation(this.currentIdle);

this._velocity = this.actor.arcadeBody2D.getVelocity();
}

update() {

Sup.ArcadePhysics2D.collides(this.actor.arcadeBody2D, Sup.ArcadePhysics2D.getAllBodies());
// Sup.log(`Actor ${this.acceleration}`);

if (Sup.Input.isKeyDown("LEFT"))
{
// Move the current behavior's actor by a small negative offset on the X axis
//Trying to implement inertia

this._velocity.x = Sup.Math.clamp(this._velocity.x-this.acceleration,-this.maxSpeed,0);

//this.actor.spriteRenderer.setAnimation("Walk_Left");
this.currentAnimation = "Walk_Left";
this.currentIdle = "Idle_Left";

}
if (Sup.Input.isKeyDown("RIGHT"))
{
// Same but positive to go to the right
this._velocity.x = this._velocity.x = Sup.Math.clamp(this._velocity.x+this.acceleration,0, this.maxSpeed);

//this.actor.spriteRenderer.setAnimation("Walk_Right");
this.currentAnimation = "Walk_Right";
this.currentIdle = "Idle_Right";
}
if (Sup.Input.isKeyDown("UP"))
{
// Move the current behavior's actor by a small negative offset on the X axis
this._velocity.y = Sup.Math.clamp(this._velocity.y+this.acceleration,0, this.maxSpeed);

//this.actor.spriteRenderer.setAnimation("Walk_Up");
this.currentAnimation = "Walk_Up";
this.currentIdle = "Idle_Up";
}
if (Sup.Input.isKeyDown("DOWN"))
{
// Move the current behavior's actor by a small negative offset on the X axis
this._velocity.y = Sup.Math.clamp(this._velocity.y-this.acceleration,-this.maxSpeed,0);

//this.actor.spriteRenderer.setAnimation("Walk_Dwn");
this.currentAnimation = "Walk_Dwn";
this.currentIdle = "Idle_Dwn";
}

if(!Sup.Input.isKeyDown("UP") && !Sup.Input.isKeyDown("DOWN") && !Sup.Input.isKeyDown("LEFT") && !Sup.Input.isKeyDown("RIGHT"))
{

//De-accelerate depending on the directtion of the speed vector
if(this._velocity.x > 0)
{
this._velocity.x = Sup.Math.clamp(this._velocity.x-this.decelaration,0,this.maxSpeed);
}
else if(this._velocity.x < 0)
{
this._velocity.x = Sup.Math.clamp(this._velocity.x+this.decelaration,-this.maxSpeed,0);
}

if(this._velocity.y > 0)
{
this._velocity.y = Sup.Math.clamp(this._velocity.y-this.decelaration,0,this.maxSpeed);
}
else if(this._velocity.y < 0)
{
this._velocity.y = Sup.Math.clamp(this._velocity.y+this.decelaration,-this.maxSpeed,0);
}
//If we have achieved complete standstill, pay the idel animation
else if(this._velocity.x === 0 && this._velocity.y === 0)
{
this.actor.spriteRenderer.setAnimation(this.currentIdle);
}

//Testing for better de-aceleration code
//if(Sup.Input.wasKeyJustReleased)

//velocity.y = Sup.Math.clamp(Math.abs(velocity.y)-this._decelaration,0,this._maxSpeed);
//velocity.x = Sup.Math.clamp(Math.abs(velocity.x)-this._decelaration,0,this._maxSpeed);
}
this.actor.spriteRenderer.setAnimation(this.currentAnimation);
//this.actor.arcadeBody2D.setVelocityX(velocity.x);
this.actor.arcadeBody2D.setVelocity(this._velocity);


}
}
Sup.registerBehavior(PlayerBehavior);

Part 1:

Part 2:

I made a short video series to help understand what the 2D platformer template is doing to help on-board beginners to the structure of Superpowers projects. This took waaaay too long to make, juggling this project in my spare time with university work I ended up spending THREE FREAKIN' MONTHS on this video series.

In this tutorial I'm using ports 8000 and 8001, for main and build. I've changed superpowers to use these ports to make them easier to remember. It's optional, but you'll have to change some numbers in step 4.

Step 1: get apache

You'll need the apache web server for this tutorial. Mac has it installed by default, windows users can download XAMPP, and linux users can download it with sudo apt-get install apache2.

Step 2: open up ports

the first thing you'll need to do is edit the httpd.conf file. On linux+mac it's usually in / etc/apache2/httpd.conf, on windows it will be where you installed it. Open up terminal and paste in the command sudo nano /etc/apache2/httpd.conf to edit it, and find the part where it says Listen 80:

#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
Listen 80
Listen 8001

Add the line "Listen 8001" (or the build server port you specified earlier)

Step 3: enable virtual hosts

While still editing http.conf, find the #virtual hosts line and uncomment then hash at the start of the line of the include so it looks like:

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf

You'll also need the proxy modules. They'll be in the LoadModule section, and you'll need to enable the following modules:

LoadModule proxy_html_module libexec/apache2/mod_proxy_html.so

LoadModule proxy_module libexec/apache2/mod_proxy.so

Note: if you can't find the proxy_module, you may be running an older version of apache. You may have to install the proxy module separately, you'll often find the .so or .dll files by looking around the internet.

Save and exit http.conf

Step 4: modify the httpd-vhosts.conf file

Run sudo nano /etc/apache2/extra/httpd-vhosts.conf. Or open it in your favorite text editor. Insert the following:

<VirtualHost *:80>
  ProxyPreserveHost On
  RewriteEngine On
  RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
  RewriteCond %{QUERY_STRING} transport=websocket    [NC]
  RewriteRule /(.*)           ws://localhost:8000/$1 [P,L]
  ProxyPass / http://127.0.0.1:8000/
  ProxyPassReverse / http://127.0.0.1:8000/
  LogLevel debug
</VirtualHost>

<VirtualHost *:8001>
  ProxyPreserveHost On
  RewriteEngine On
  RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
  RewriteCond %{QUERY_STRING} transport=websocket    [NC]
  RewriteRule /(.*)           ws://localhost:8001/$1 [P,L]
  ProxyPass / http://127.0.0.1:8001/
  ProxyPassReverse / http://127.0.0.1:8001/
  LogLevel debug
</VirtualHost>

If to you're not running superpowers on ports 8000 and 8001 you'll have change the numbers in the text above.

Step 5: start apache

Run the command sudo apachectl restart or restart apache in the xampp command console.

You can test to see if it works by entering the IP address (or domain name, in most routers this is really easy to set up) of your computer in a browser. It's using port 80 so it should just work.

If nothing happens, check the error.log file with the command tail -f /var/log/apache/error_log (or opening the error_log file in a text editor)

How it works

It works by routing all external traffic on port 80 and 8001 to the internal machine on port 8000 and 8001.

http://www.tzu3d.com/tutorials/Superpowers/tuto-1-Intel%20XDK.html

Probably one of the most unhelpful videos I have ever made. I started out as a tutorial on making pong, then it turned into a tutorial about polish. Then... this happened.

Any questions or concerns please comment below.

You can find code similar to the one I used in the Superpowers Docs: http://docs.superpowers-html5.com/en/getting-start...

I also made it so the video is not blurry anymore xD Will try to get the next episode up in a few days. It will go over how to spawn bullets from the player that go where you are aiming.

https://www.youtube.com/watch?v=GF8i4R-S1HY

My plan is to provide a tutorial series of game development process as my learning go and to share my adventures in Superpowers with the community.

Of course I am always eager to learn and this tutorials can always be improved, this is why I stick to the open source philosophy of the community and let anyone open issues and fix the tutorials to allow everyone to adopt them.

Two ways to help, you can address in this tutorial post your problems, propose change and ask for tutorial clarity. Or if you feel comfortable with that, you can open an issue on github or even can improve the tutorial directly by submitting pull requests for the markdown files in the github repository.

Please, don't hesitate to say if you find mistakes, missing elements or unclear steps as it would help to improve this tutorials aimed to the Superpowers community. (Also, I am not an english native then don't think I would feel offended if you report my grammar and style with the language, I could improve this part too.)

Thank you and have fun making games !

• SUPERPOWERS TUTORIAL #1 Super Pong :
  • tutorial --- play the game --- assets --- source project

Note : you can download zip for sources here.

Hello, here is a new classic game remade with a complete tutorial description.

You can address in this tutorial post your problems, propose change and ask for tutorial clarity. Or if you feel comfortable with that, you can open an issue on github or even can improve the tutorial directly by submitting pull requests for the markdown files in the github repository.

Thank you :-)

• SUPERPOWERS TUTORIAL #5 Super Pacman
  • read gitbook tutorial --- play the game --- source assets --- source project

Note : you can download fast zip for sources here.

My plan is to provide a tutorial series of game development process as my learning go and to share my adventures in Superpowers with the community.

Of course I am always eager to learn and this tutorials can always be improved, this is why I stick to the open source philosophy of the community and let anyone open issues and fix the tutorials to allow everyone to adopt them.

Two ways to help, you can address in this tutorial post your problems, propose change and ask for tutorial clarity. Or if you feel comfortable with that, you can open an issue on github or even can improve the tutorial directly by submitting pull requests for the markdown files in the github repository.

Please, don't hesitate to say if you find mistakes, missing elements or unclear steps as it would help to improve this tutorials aimed to the Superpowers community. (Also, I am not an english native then don't think I would feel offended if you report my grammar and style with the language, I could improve this part too.)

Thank you and have fun making games ! :-)

• SUPERPOWERS TUTORIAL #2 Super OXO :
  • tutorial --- play the game --- source assets --- source project

Note : you can download zip for sources here.

http://www.instructables.com/id/How-to-make-your-first-3D-model/?ALLSTEPS

I have no idea how to do it x), thanks in advance

My plan is to provide a tutorial series of game development process as my learning go and to share my adventures in Superpowers with the community.

Of course I am always eager to learn and this tutorials can always be improved, this is why I stick to the open source philosophy of the community and let anyone open issues and fix the tutorials to allow everyone to adopt them.

Two ways to help, you can address in this tutorial post your problems, propose change and ask for tutorial clarity. Or if you feel comfortable with that, you can open an issue on github or even can improve the tutorial directly by submitting pull requests for the markdown files in the github repository.

Please, don't hesitate to say if you find mistakes, missing elements or unclear steps as it would help to improve this tutorials aimed to the Superpowers community. (Also, I am not an english native then don't think I would feel offended if you report my grammar and style with the language, I could improve this part too.)

Thank you and have fun making games ! :-)

• SUPERPOWERS TUTORIAL #3 Super Sokoban :
  • tutorial --- play the game --- source assets --- source project

Note : you can download zip for sources here.