Working on my game, but kind of stuck, what I’m trying to accomplish is to move my sprite on screen using the Touch Method, in other words, use the finger to move the sprite while touching. I understand, that I can use the TOUCH_ONE_BY_ONE event and then set up:
onTouchBegan, onTouchMoved, onTouchEnded, but after that, I’m kind of stuck in setting up…I’m trying to use the code from the tutorial from game dark slash master , but would appreciate any help on info, on to set, or just a simple explanation of moving a sprite using the Touch Method…Thanks and God Bless…
Hi,
I just bought the book Learning Cocos2d -JS Game Development, and I’m looking at this example of Touch, which have implemented on my game, but it still doesn’t work:
setInputControl:function(){
var self = this;
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
onTouchBegan: function(touch, event){
self.touching = true;
var detectedX = touch.getLocation().x;
var savedX = this.detectedX;
cc.log("Node Name: " + this.detectedX);
return true;
moveLeft: function () {
var ibisrunmove = this.getComponent(cc.Animation);
ibisrunmove.play(“ibisrunleftanim”)},
update:function(dt){
/////////////// Touch Move /////////
if (this.touching === false){this.stand()}
if (this.touching && this.detectedX < this.node.getPositionX()){
this.node.x -= this.moveLeft()+this.accel * dt}
The thing is that when I touch the screen it calls the moveLeft() function but it doesn’t move across the screen, then when I release the touch it stops by calling the stand function, and then when I touch again, nothing happens…Any help will be appreciated it…Thanks for your help and God Bless…
onTouchMoved: function(touch, event) {
var detectedX = touch.getLocation().x;
var detectedY = touch.getLocation().y;
},
Why you declare here a variable?
onTouchMoved: function(touch, event) {
var detectedX = touch.getLocation().x;
var detectedY = touch.getLocation().y;
},
And here?
Is it not possible to declare before these functions?
I think you want to create a variable what can you reach outside of these functions. Or if not, then in touchMoved the ‘detected’ is not used.
But if i declare those variables outside of the function, wouldn’t that be outside of the scope? How can it store the touch location on the var detected X, maybe what I need is to declare a variable like outside, like var test = savedX - detectedX ? God Bless…
Can you please look at the above code, when you have a chance and offer some guidance on the above code regarding moving a sprite while touching the screen…This is using the Touch method…Would really appreciated it…Thanks and God Bless…
setInputControl:function(){
var self = this;
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
onTouchBegan: function(touch, event){
self.touching = true;
var detectedX = touch.getLocation().x;
var detectedY = touch.getLocation().y;
self.savedX = self.detectedX;
self.savedY = self.detectedY;
return true;
},
onTouchMoved: function(touch, event) {
// var target = event.getCurrentTarget();
var detectedX = touch.getLocation().x;
var detectedY = touch.getLocation().y;
},
onTouchEnded: function(touch, event) {
self.touching = false;
}
},self.node);
},
AnimLeft: function () {
var ibisrunmove = this.getComponent(cc.Animation);
ibisrunmove.play("ibisrunleftanim");
},
update:function(dt){
/////////////// Touch Move /////////
var test = this.savedX-this.detectedX;
var testy = this.savedY-this.detectedY;
var actionTo = cc.moveTo(this.accel*dt, cc.p(this.test, this.testy));
// var actionBy = cc.moveBy(5, cc.p(this.test, this.testy));
///// Move Left
if (this.touching && this.test < this.node.getPositionX()){
this.node.x -= this.node.runAction(actionTo)+this.AnimLeft()} else
////Move Right
if (this.touching && this.test > this.node.getPositionX()){
this.node.x += this.node.runAction(actionTo)+this.AnimRight()} else
////Move Down
if (this.touching && this.testy < this.node.getPositionY()){
this.node.y -= this.node.runAction(actionTo)+this.AnimDown()}else
////Move Up
if (this.touching && this.testy > this.node.getPositionY()){
this.node.y += this.node.runAction(actionTo)+this.AnimUp()}
else if (this.touching){
this.AnimStand();
this.node.stopAction(actionTo)
}
Trying to accomplish is moving the sprite by using touch ( dragging the finger on screen ), left, right, down, and up…Any help would be greatly appreciated it…Thanks for your time and God Bless…
I understand your team is very busy working on Cocos Creator, but would you please be so kind in looking over this code and give me directions in getting it to work. My game, has been halted due to the above code. What I’m trying to accomplish is moving my sprite via Touch by dragging the finger either directions X, Y.…Unfortunately, I think I’m still missing something in the code…Would really appreciated it…Also, do you think it would be economically feasible to have a Part TimePaid Forum Javascript / C ++ coder that would help folks with their code on the forum…Wouldn’t this help new and experience users get the grasp of the framework faster., especially Cocos Creator…? God Bless…
In your code, I find that you just registered savedX, savedY but not detectedX and detectedY, so you will need to register them too.
This kind of problem can be easily tracked with Chrome dev tools, you can just setup a break point in your update function, and see what’s happening with all the values and logics.
And we no longer suggest user to use cc.eventManager for touch and mouse event, we have provided node based event dispatching system, please take a look at the documentation:
Thank you for looking at the code, and offering suggestions…Yes, I will be implementing the node based even dispatching system to move my sprite, it looks more simple, than the previous I had on the code. Also, will be looking into the Chrome Dev tools as an aid in programming…If you don’t mind, I have another quick question, what is the quickest way to implement pad integer in javascript? For example, I have a score = 0, but would like to display score = 000000 Thanks again for your hard work, and dedication…God Bless…
I understand you are very busy updating Cocos Creator, but please, when you have a chance, I’ve updated the code for the movement part of the sprite, like @pandamicro suggested, still the sprite only recognizes moving to the left… Please see below:
thetouchlayer: {
default: null,
type: cc.Node
},
I’ve declared thetouchlayer node into the player script, to use it to move the player…
TheIbisMoveTouch:function(){
var self = this; this.thetouchlayer.on(cc.Node.EventType.TOUCH_START, function (touch,event) {
self.touchingleft = true;
self.touchingright = true;
var detectedX = touch.getLocationX();
cc.log(‘Touch Loc:’+detectedX);
self.savedX = self.detectedX;
return true;
}, this.thetouchlayer.on(cc.Node.EventType.TOUCH_MOVE, function (touch,event) {
var detectedX = touch.getLocationX();
}, this.thetouchlayer.on(cc.Node.EventType.TOUCH_END, function (touch,event) {
self.touchingleft = false;
self.touchingright = false;
},this)))},
I would really appreciate help you can offered. I’m just looking to get both movements on the x axis of the player. Once, I understand the concept of moving the player left and right by dragging the finger on the screen, I can implement the same method on the y axis…Thanks again for your hard work and dedication with Cocos Creator…God Bless…
I think the most problem on your code is the variable scope. When you register a variable inside function block then it will not be recognized outside that function block. You can read some online resources about javascript variable scope.
So this.detectedX will always its default 0, because the detectedX you declare is inside another inner function scope.
Thus this
God Bless…
God Bless…
God Bless…