Project with Post-Processing:  https://github.com/SchynsO/DemoFirstPerson

Error pic: 

If anyone out there still using Superpowers that could help me in solving this and getting it working, I would be so thankful!!! 

I tried Prompt however that is for vanillas JS it seems and it doesn't work for Sp TS. Sup.input has no functions for it it seems and this page doesn't seem to work for me.  Am I missing something that's in plain sight? 

I was wondering, is there a way to get the phone pitch, yaw and roll ?

I saw ways to do it in JS (using window.addEventListener()), but it doesn't seems to work with superpowers, the compilation fails.

Do somebody knows if there is a way to get it ? (a plugin or a function that is well hidden ?)

Thanks anyway :D

i got code now so thats cool 

if(Sup.Input.isKeyDown("RIGHT") && turncoin > 0){ 
        let orientation = new Sup.Math.Quaternion(0, 0, 90, 0);
        this.actor.setOrientation(orientation);
        stage = "static";
        turncoin =  turncoin - 25;
      } 

Do you know a way to getBehavior with an interface passed as an arg.

My problem is that I created a IInteractable interface, implemented on some behavior.
When I press E input, I want to get the component (if it exists) that implements the interface of the actor in front of the character.

Here's my code:

interface IInteractable
{
  interactable(): void;
}
class LightBehavior extends Sup.Behavior implements IInteractable {
  interact()
  {
    this.switchLight();
  }
  
  switchLight()
  {
    /* CODE OMITTED */
  }
}
Sup.registerBehavior(LightBehavior);
class CharacterBehaviour extends Sup.Behavior
{
 update()
 {
     if (Sup.Input.isKeyDown("E"))
     {
         /* Get actor in front of the character*/
         /* THE PROBLEM: Get IInteractable interface of the actor*/
     }
 }
}

Thank you guys!

Picture the following scenario for example:

The game has an options menu which allows the player to change the controls. When the player presses a key, the key is saved in local storage.

Is there a way to get the key name without having to compare them one by one?

In my game I store the data about my NPC into a Database with a JSON file. I want to have a NPC with a specific image depending on data. For example if it is level 5 I want to put the sprite of level 5.

In a normal TypeScript app I would have put a string with the URL of the sprite (spirte = 'spirteUrl'+npc.level). But on Superpowers I don't know how to do that because the link to the sprite is on the actor, not the script.

Thanks for your help

hi im trying to draw line in three.js from one dynamically created Actor model to another

1st level is 0,0,0 actor
2nd level of nested Actors give correct cords and line is ok 
3rd level of nested Actors give incorrect cords and line is wrong
code>>>
let toStar=(this.map[1] as Sup.Actor);
let staractor=(this.map[0] as Sup.Actor);
let toStarp=toStar.getChildren()[0].getPosition();
let staractorp=staractor.getChildren()[0].getPosition();
let g=new THREE.Geometry();
g.vertices.push(new THREE.Vector3(staractorp.x,staractorp.y,staractorp.z));
g.vertices.push(new THREE.Vector3(toStarp.x,toStarp.y,toStarp.z));
let line=new THREE.Line(g,new THREE.LineBasicMaterial({color:0xFFFFFF,opacity:0.5} ));

tryed to compute via recursion add getLocalPosition()+getParent().getPosition() but values are still wrong... 

API: this.actor.spriteRenderer.setAnimation(String " ",looping? boolean);  

No matter what I do I cannot get this animation to not loop, and I have tried to go the long way by using "wait" functions but I could not figure out how to do that either, please help!

I tried setting "class PlayerBehavior extends EntityBehavior"

but the code doesn't run

It would be cool to see some sort of help tab in superpowers that shows anwsers to categories of questions

I have a problem : is there any function or way to know if my mouth is focusing an object in a 3D context ?

Here is my problem : I have a box, and I want to execute an action when I click on it. But the thing is that my camera can move. So I can't use the getMousePosition method which only returns 2D coordinates...

thank you !

The pixels per unit of the map is 50

The pixels per unit of th player is 100

I've try to multiply coordinate by 1.5 but the result is not good.

Default value of coordinates (After 1.5 multiplication x= 14.49)

I was a backer for Superpowers when it was first announced and always liked the idea of using Superpowers for my projects.

The only thing that kept me from using it commercially was the mobile support.

As the title suggests, I am worried about 2 things:

- Mobile performance. Does anyone know how 2d or 3d games perform on iOS and Android?

- Ads and IAP. I recently found this. They are plugins for many ad services and iap's for html5. Do you think they could work with Superpowers?

Thank you :)

So, here's the deal: I'm working in 3D and I want to make an actor move based on where it's facing. So hitting the 'W' key should move the character towards where they are 'looking' at [ using physics, btw, got a cannon-body hooked up to the character ].

I've tried a few methods, but the simplest seems to be:

this.actor.cannonBody.body.applyLocalImpulse( new CANNON.Vec3( 0, 0, -1 ), new CANNON.Vec3( 0, 0, 0 ) );

Now, while this does work, I'm very new to 3D programming, confused about physics, and bad at math haha. So I was wondering if this is the best way to go about it, or is there a simpler / possibly less resource-intensive [ not that I notice `applyLocalImpulse()` to be all that bad ] way of going about things?

If you have experience with this kind of stuff, please let me know! And share any and all knowledge you have on the topic as I'm trying to consume all the information I can in an effort to learn. Thanks a ton! :)

For example, I would do something like:

    this.mySprite.setSprite("Path/To/Sprite");

but I'd like to be able to do:

    if(AssetExists("Path/To/Sprite")
        this.mySprite.setSprite("Path/To/Sprite");

I have quite a few tweens running and I'd like to be able to just stop all of them when an in-game pause button is pressed.

Thanks!

X.spriteRenderer.setSize(32, 32);

Error Message:

Uncaught Error: Could not find a behavior class named "EnemyShipSpawnerAIBehavior" for actor "EnemyShipSpawner". Make sure you're using the class name, not the script's name and that the class is declared before the behavior component is created (or before the scene is loaded).

I try to do pixel art, but when it's in-engine, it always seems distorted.

It comes out looking like this, when I created it to look like this.

I can't figure out how to make it not distort pixel art, and its making creating good looking pixel art difficult.

Is this my mistake, my browser's mistake, or an engine mistake, and if it's the first one, how do I avoid it?

namespace Game {

export let initMap: initMapBehavior;

export let player: playerBehavior;

export let score: number;

export let won: boolean;

}

I was hoping I would access my player functions from other scripts by doing something like

Player.jump

But I'm getting an identifier expected error.

uniform float time;
varying vec2 vUv;
/*
"Seascape" by Alexander Alekseev aka TDM - 2014
License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Contact: tdmaav@gmail.com
*/
const int NUM_STEPS = 8;
const float PI         = 3.1415;
const float EPSILON    = 1e-3;
float EPSILON_NRM    = 0.1 / 800;
// sea
const int ITER_GEOMETRY = 3;
const int ITER_FRAGMENT = 5;
const float SEA_HEIGHT = 0.6;
const float SEA_CHOPPY = 4.0;
const float SEA_SPEED = 0.8;
const float SEA_FREQ = 0.16;
const vec3 SEA_BASE = vec3(0.1,0.19,0.22);
const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6);
float SEA_TIME = time * SEA_SPEED;
mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);
// math
mat3 fromEuler(vec3 ang) {
    vec2 a1 = vec2(sin(ang.x),cos(ang.x));
    vec2 a2 = vec2(sin(ang.y),cos(ang.y));
    vec2 a3 = vec2(sin(ang.z),cos(ang.z));
    mat3 m;
    m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);
    m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);
    m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y);
    return m;
}
float hash( vec2 p ) {
    float h = dot(p,vec2(127.1,311.7));    
    return fract(sin(h)*43758.5453123);
}
float noise( in vec2 p ) {
    vec2 i = floor( p );
    vec2 f = fract( p );    
    vec2 u = f*f*(3.0-2.0*f);
    return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ), 
                     hash( i + vec2(1.0,0.0) ), u.x),
                mix( hash( i + vec2(0.0,1.0) ), 
                     hash( i + vec2(1.0,1.0) ), u.x), u.y);
}
// lighting
float diffuse(vec3 n,vec3 l,float p) {
    return pow(dot(n,l) * 0.4 + 0.6,p);
}
float specular(vec3 n,vec3 l,vec3 e,float s) {    
    float nrm = (s + 8.0) / (3.1415 * 8.0);
    return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
}
// sky
vec3 getSkyColor(vec3 e) {
    e.y = max(e.y,0.0);
    vec3 ret;
    ret.x = pow(1.0-e.y,2.0);
    ret.y = 1.0-e.y;
    ret.z = 0.6+(1.0-e.y)*0.4;
    return ret;
}
// sea
float sea_octave(vec2 uv, float choppy) {
    uv += noise(uv);        
    vec2 wv = 1.0-abs(sin(uv));
    vec2 swv = abs(cos(uv));    
    wv = mix(wv,swv,wv);
    return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
}
float map(vec3 p) {
    float freq = SEA_FREQ;
    float amp = SEA_HEIGHT;
    float choppy = SEA_CHOPPY;
    vec2 uv = p.xz; uv.x *= 0.75;
    float d, h = 0.0;    
    for(int i = 0; i < ITER_GEOMETRY; i++) {        
        d = sea_octave((uv+SEA_TIME)*freq,choppy);
        d += sea_octave((uv-SEA_TIME)*freq,choppy);
        h += d * amp;        
        uv *= octave_m; freq *= 1.9; amp *= 0.22;
        choppy = mix(choppy,1.0,0.2);
    }
    return p.y - h;
}
float map_detailed(vec3 p) {
    float freq = SEA_FREQ;
    float amp = SEA_HEIGHT;
    float choppy = SEA_CHOPPY;
    vec2 uv = p.xz; uv.x *= 0.75;
    float d, h = 0.0;    
    for(int i = 0; i < ITER_FRAGMENT; i++) {        
        d = sea_octave((uv+SEA_TIME)*freq,choppy);
        d += sea_octave((uv-SEA_TIME)*freq,choppy);
        h += d * amp;        
        uv *= octave_m; freq *= 1.9; amp *= 0.22;
        choppy = mix(choppy,1.0,0.2);
    }
    return p.y - h;
}
vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {  
    float fresnel = 1.0 - max(dot(n,-eye),0.0);
    fresnel = pow(fresnel,3.0) * 0.65;
    vec3 reflected = getSkyColor(reflect(eye,n));    
    vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12; 
    vec3 color = mix(refracted,reflected,fresnel);
    float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
    color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;
    color += vec3(specular(n,l,eye,60.0));
    return color;
}
// tracing
vec3 getNormal(vec3 p, float eps) {
    vec3 n;
    n.y = map_detailed(p);    
    n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
    n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
    n.y = eps;
    return normalize(n);
}
float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {  
    float tm = 0.0;
    float tx = 1000.0;    
    float hx = map(ori + dir * tx);
    if(hx > 0.0) return tx;   
    float hm = map(ori + dir * tm);    
    float tmid = 0.0;
    for(int i = 0; i < NUM_STEPS; i++) {
        tmid = mix(tm,tx, hm/(hm-hx));                   
        p = ori + dir * tmid;                   
        float hmid = map(p);
        if(hmid < 0.0) {
            tx = tmid;
            hx = hmid;
        } else {
            tm = tmid;
            hm = hmid;
        }
    }
    return tmid;
}
// main
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    
    float ttime = time * 0.3;
    // ray
    vec3 ang = vec3(sin(ttime*3.0)*0.1,sin(ttime)*0.2+0.3,ttime);    
    vec3 ori = vec3(0.0,3.5,ttime*5.0);
    vec3 dir = normalize(vec3(vUv.xy,-2.0)); dir.z += length(vUv) * 0.15;
    dir = normalize(dir) * fromEuler(ang);
    // tracing
    vec3 p;
    heightMapTracing(ori,dir,p);
    vec3 dist = p - ori;
    vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
    vec3 light = normalize(vec3(0.0,1.0,0.8)); 
    // color
    vec3 color = mix(
        getSkyColor(dir),
        getSeaColor(p,n,light,dir,dist),
        pow(smoothstep(0.0,-0.05,dir.y),0.3));
    // post
    fragColor = vec4(pow(color,vec3(0.75)), 1.0);
}
void main(){
  vec4 color = vec4(0.0,0.0,0.0,1.0);
  mainImage( color, gl_FragCoord.xy );
  color.w = 1.0;
  gl_FragColor = color;
}

Original shader is here - https://www.shadertoy.com/view/Ms2SD1

Thanks.

class FollowMouseBehavior extends Sup.Behavior {

update() {

this.actor.setPosition(Sup.Input.getMousePosition());

}

}

Sup.registerBehavior(FollowMouseBehavior);

It "roughly" follows the mouse cursor, but it drags behind a bit and I'm not sure why.

I would like to use to trigger some method from a class from another one using "export". For example I would like to do:
"export class CharacterBehavior ..." and then import it in another file "import (CharacterBehavior) from './game'".
But when I do that it keeps telling me : "(0): Cannot compile modules unless the '--module' flag is provided."
Does someone know how I could achieve that ?

Thank you =)

I have model and want to use two maps.

But in superpowers i am import model and only one texture.

so,can i use two or more maps and how to do it.

thanks.

So, in my game i would like the player to move considering his orientation, for exemple if the player's character looks on the right, pressing forward will transform the vector 1, 0, 0 to 0, 0, 1. I'm just looking for a transform function, but didn't found something corresponding to what I need. already use this line of code for the movement:

this.actor.cannonBody.body.applyImpulse(new CANNON.Vec3(Sup.Input.getGamepadAxisValue(0,0) * this.speed - v.x, velocity.y - v.y, Sup.Input.getGamepadAxisValue(0,1) * this.speed - v.z), pos);

thanks :)

i've used the ray method to detect "intersect" with a sprite. It works but with the whole image. I mean even if i click on the void of my sprite (invisible pixel).

How can i detect exact click on the sprite (with color).

Regards.

Fairy

if so how? I don't see anything around the name of "get_keyboard"

if (Sup.getScene() === 'SceneA') 
    { //doSomething } 
else if (Sup.getScene() === 'SceneB') 
    { //doOtherStuff } 
else 
    { //doNothing }

The point is: I want to get the current scene running. Is it Possible?

@Edit

I tried this: Scene Detection by LukeLanFaust answer, but my Log was: >> activeScene content: undefined

class ShipBehavior extends Sup.Behavior {

//Connect the ship to it's collision

ship_hull = this.actor.arcadeBody2D;

//Set the handling speed

speed : number = .025

awake() {

}

update() {

let x : number = this.actor.getX();

let x_speed : number = Math.abs(this.ship_hull.getVelocityX());

let new_x_speed : number = 0;

//Check in any key is pressed, and if one is, update the direction accordingly

//Handle leftward movement

if(Sup.Input.isKeyDown("A")){

new_x_speed =-this.speed;

}

//Handle rightward movement

else if(Sup.Input.isKeyDown("D")){

new_x_speed = this.speed;

}

this.ship_hull.setVelocityX(new_x_speed);

}

}

Sup.registerBehavior(ShipBehavior);

But it produces strange behavoir when run, as I move at a crawl to the left, but at a very fast (maybe 10x?) pace when I go left. this is literally the only script in the game, so the problem is going to be in here.

Thanks in advance,

Unwary

if (Sup.ArcadePhysics2D.collides(this.actor.arcadeBody2D, Sup.getActor("collision").arcadeBody2D) { 
   if (Sup.getActor("collision").spriteRenderer.getAnimation() == "animation1") { 
      //do something... 
   } 
}

After this step I am going to make a generic function so I can do whatever I want without needing to put this code everywhere. Something like:

collidesWith(target, animation) { 
   if (target.getAnimation() == animation) { 
      //do something.. 
   } 
}

My current issue is I don't know the proper way to get the actor that was involved in the collision. For example if a car collides with a wall how can I reference that wall's actor with a collision script inside of the car?

I had posted this on Reddit too, I will update either posting with the working response.

I'm trying to render some island models (put into a different scene than the main Sup one) to a WebGLRenderTarget and draw it to a plane mesh via a shader.

The shader works, but the WebGL rendering doesn't. Here is my code. If anyone needs it, I could even make a demo project.

This was based on this three.js demo.

I need an answer/help really soon (as in within a day or so) because the first phase of my project is going to be due.

awake(){

var ran = new RNG('w');

Sup.log(ran.random(1,10))

}

Is there something wrong with my code

EDIT: Silly me, I missed the getTileAt() function. Whoops. However, am I overcomplicating things?

I'm experimenting with 3D Models in Superpowers at the moment and do hope that someone can help me.

I have a sweet little model, which loads up nicely. As I have several textures for that model, I created different Maps in "Advances Textures".

While updating the Map-Field in the Model Windows is working fine, I absolutely can't find a solution on how to change the Map in runtime (I tried to find something in the documentation, but all tries (like these:

if (Sup.Input.isKeyDown("1")) this.actor.tileMapRenderer.setTileSet("Adventurer");
if (Sup.Input.isKeyDown("1")) this.actor.tileMapRenderer.setTileMap("Adventurer");
if (Sup.Input.isKeyDown("1")) this.actor.modelRenderer.setModel("Adventurer");

Did not work at all.

Anyone has an idea? I feel a bit lost at the moment :(

But in the solution, some code was taken out. Before It was like...

Sup.appendScene("CavemanPrefab", Sup.getActor("Cavemen"));

And this was the solution I got sent, which worked perfectly.

let caveman = Sup.appendScene("CavemanPrefab")[0];
caveman.arcadeBody2D.warpPosition(Sup.getActor("Cavemen").getLocalPosition());

However, I want to parent the appended Caveman actors to the Cavemen actor for collision reasons and stuff. But, when I do, the bug happens again, but not in the same way (here's a gif).

Here's what I tried:

let caveman = Sup.appendScene("CavemanPrefab", Sup.getActor("Cavemen"))[0];
caveman.arcadeBody2D.warpPosition(Sup.getActor("Cavemen").getLocalPosition());

let Caveman = Sup.appendScene("CavemanPrefab")[0];
Caveman.arcadeBody2D.warpPosition(Sup.getActor("Cavemen").getLocalPosition());
Caveman.setParent(Sup.getActor("Cavemen"));

What am I missing?

Oh. It looks like I'm going to have to duplicate this shader in full for every individual texture I want to apply it to because there is no way to change the uniforms at runtime. The TypeScript class for shaders is a big opaque dummy you can't do anything with, and the setup to apply a shader to a sprite in a scene or by script doesn't allow for any further inputs besides the shader path to apply.

:( Disappointment.