Playhack idea super quix

Hello, i’m squeezing my head to see if a good simple idea come out, but every thing seems too complex to develop it in the short 1 month time, i lack the experience to develop mobile games. Never played any of them :stuck_out_tongue: I really hate play games on mobile coz it’s too small. The robot provided for development has no animations…this sucks. The only game that i thought is doable is an old one where you build geometric shapes to make the area where the enemy move smaller till you fill a given % of the space. Was called quix or super quix https://www.youtube.com/watch?v=entXa58aG9U here is a link. It would be nice to make it with the robot that build the space and the ufo that move inside and try to destroy the robots. when the round end the player with more % of space win. Someone want help?

Nice, I hadn’t seen Quix before. Kind of reminds me of Painter that I used to play on my BBC Micro as a kid:

I think the best game ideas are the simplest. A game based on Quix (or indeed Painter) could be awesome. Go for it! :smiley:

Lol thanks for your cheers, i would love to, i will try but i lack lot of knowledge…also about mobile ways of play, i guess make buttons on the screen is the only way.

I’m squeezing my head but can’t find a way to draw the lines and make just the lines walkable sigh

I loved Qix as a kid.

Here are a few ideas on how to implement it:

Lines

One way is to use the renderLine method to draw lines. This is very simple, but you can only draw one pixel wide lines, so not very flexible.

Another way is to use a mesh to draw a line. You could create the mesh by hand using pc.createPlane method or you could use the plane primitive in the model component and use the Entity scale to set the length.

Using the plane primitive you could do something like this. Create two functions, createLine and updateLine

createLine = function (start, end) {
  var e = new pc.Entity();
  e.addComponent ("model", {
    type: "plane"
  });
  updateLine(e, start, end);
};

updateLine = function (e, start, end) {
  tmp.copy(start).sub(end);
  e.setLocalScale(0.1, 1, tmp.length());
  // set rotation
  // this is a bit more complicated, I haven't got time to do it now
  // but it will probably involve Math.atan2(tmp.x, tmp.z);
}

If you can get those two functions working, you’ll have a nice way of creating a new line (when the player starts to cross an area).

Making Lines Walkable

With the method you can create lines by defining a start and end point. So from here, when the player enters the middle area, you create a new line, then you update it from the start point to the player’s current position. If the player changes direction, you create a new line from that position to the players current position. When the player reaches the edge again. The lines are fixed and you then have to work out how to fill the area :slight_smile: You could do that with plane entities too, or use pc.createMesh.

mmmhh seems simple things are the hardest lol I guess it’s my usual luck :smiley:
Quix was a game i loved on c64 and i thought lot of guys today never played it, and making it with a new graphic can be popular. so i thought of make a solar system conquest where you battle on each planet for the supremacy using Quix who reach the highest % win. If u reach the end with the highest % you win the game. Also a list with the best player would be nice

This should be right for the controller, just need to add the touch events in the update, is that right?

pc.script.create('Joystick', function (app) {
// Creates a new Joystick instance
var Joystick = function (entity) {
    this.entity = entity;
};

Joystick.prototype = {
    // Called once after all resources are loaded and before the first update
    initialize: function () {
            this.position=new vect(0,0); //position of the whole joystick    
            this.stickPosition=new vect(0,0); //position of the stick    
            this.delta=new vect(0,0); //vector from joystick to finger    
            //stick contour    
            this.size=new vect(imgJoystick.spriteSize.X*this.stickSize[OPTION.stickSize],imgJoystick.spriteSize.Y*this.stickSize[OPTION.stickSize]);    
            this.halfSize=new vect(this.size.X>>1,this.size.Y>>1);    
            this.squareRad=this.halfSize.X*this.halfSize.X; //compared with square magnitude of delta in setPosition() to determine what to do    
            this.stickContour=new sprite(this.position,0,0,imgJoystick,this.size,this.halfSize,0);        //stick    
            this.sSize=new vect(imgJoystick2.spriteSize.X*this.stickSize[OPTION.stickSize],imgJoystick2.spriteSize.Y*this.stickSize[OPTION.stickSize]);    
            this.sHalfSize=new vect(this.sSize.X>>1,this.sSize.Y>>1);    this.stick=new sprite(this.stickPosition,0,0,imgJoystick2,this.sSize,this.sHalfSize,0);        
            this.life=0;        
            this.margin=new Margin(-this.halfSize.X,-this.halfSize.Y);
    },
    
            draw:function(){        
                if(SCREEN.touched){ //draw joystick if TOUCH_PRESSED            
                    this.stickContour.draw();            
                    this.stick.draw();        
                }    
            },    
            setPosition:function(fingerPosition){ //TOUCH_MOVED            
                this.computeDelta(fingerPosition); //compute the vector from finger to joystick                         
                var sMag = this.delta.squareMagnitude(); //square magnitude of delta            
                if (sMag >= this.squareRad){ //joystick moves if the finger is out of the joystick contour                
                    this.stickPosition.initV(fingerPosition); //stick moves under the finger                                
                    this.delta.normalize(); //delta is now a direction                
                    this.delta.scale(this.halfSize.X,2); //delta is now the stick position relative to the whole joystick                                
                    this.position.initV(fingerPosition); //joystick contour moves under the finger                
                    this.position.subtract(this.delta); //joystick contour is moved in order to keep stick direction                
                    this.clamp();// the joystick contour can't go out of the screen                        
                } else {//finger is inside the joystick contour. We move the stick only                
                    this.stickPosition.initV(fingerPosition); //stick is moved under the finger                            
                this.computeDirection(); //gives the stick direction to the space ship    
                }
            },    
            computeDelta:function(position){ //compute the vector from finger to joystick         
                this.delta.initV(position);        
                this.delta.subtract(this.position);    
            },    
            computeDirection:function(){ //sends the joystick direction to the space ship        
                SHIP.direction.initV(this.delta);        
                SHIP.direction.scale(1/this.halfSize.X,2); //normalize D    
            },    
            clamp:function(){ //joystick contour can't go out of screen        
                if(this.position.Y<this.margin.top)this.position.Y=this.margin.top;        
                if(this.position.X>this.margin.right)this.position.X=this.margin.right;        
                if(this.position.Y>this.margin.bottom)this.position.Y=this.margin.bottom;        
                if(this.position.X<this.margin.left)this.position.X=this.margin.left;    
            },    
            release:function(){ //TOUCH_RELEASED        
                this.stickPosition.initV(this.position);        
                SHIP.direction.init(0,0);        
            },    
            init:function(fingerPosition){ //TOUCH_PRESSED        
                this.position.initV(fingerPposition);        
                this.stickPosition.initV(fingerPosition);        
                this.clamp();        
                this.computeDelta(fingerPosition);       
                this.computeDirection();    
            },
        
    // Called every frame, dt is time in seconds since last update
    update: function (dt) {

    }
};

return Joystick;
});