Quiz Drag & Drop

Post your help queries and engine programming questions here

Quiz Drag & Drop

Postby Genestealer » Sun Mar 16, 2014 5:42 pm

Hi,

I have to do a quiz "Drag & Drop" for a game using Isogenic.
It's hard to do that because i can't find tools and methods with the classes IgeUi*** and Isogenic's Buttons doesn't allow methods out of its classes.

I would know if Isogenic have some classes or methods to make this task easier ? Or if there is anothers solutions ?

Thank you,
User avatar
Genestealer
 
Posts: 5
Joined: Sun Mar 16, 2014 5:36 pm

Re: Quiz Drag & Drop

Postby Doidel » Mon Mar 17, 2014 5:54 pm

Hmm good point, strange, nobody requested a drag&drop functionality so far :| I never noticed something like that was missing.

Well, I would suggest creating a component for that!
Further, what might be useful is IgeEntity._mouseStateOver which indicates whether the mouse is over an entity or not. Other than that we can use the mouseDown event of IgeEntity.
Further you might want to define a "handler" for an entity. This is the area where a drag&drop starts when you click (mouseDown) it. And when that occured you might have a behaviour in your component which adjusts the element's position relative to the delta the mouse moved since you started dragging. And on mouseUp you top the dragging :)

Hope that doesn't sound too complicated.
User avatar
Doidel
 
Posts: 59
Joined: Tue Jan 14, 2014 5:05 pm

Re: Quiz Drag & Drop

Postby Doidel » Mon Mar 17, 2014 6:20 pm

Here's a bit of a start if you don't know how a component is created. Nothing tested, just from the top of my head:

Code: Select all
var IgeDragDropComponent = IgeClass.extend({
   classId: 'IgeDragDropComponent',
   componentId: 'drag',

   init: function (entity, options) {
      this._entity = entity;

      this._mouseDragStart = new IgePoint3d(0, 0, 0);
      this._entityDragStart = new IgePoint3d(0, 0, 0);
      
      this.handler = options.handler || {
         x1: 0,
         y1: 0,
         x2: entity.width(),
         y2: entity.height();
      };

      entity.on('mouseDown', this._mouseDown, entity);
      entity.on('mouseUp', this._mouseUp, entity);
      
      // Add the dragMove behaviour to the entity
      entity.addBehaviour('dragMove', this._behaviour);
   },

   /**
    * The behaviour method executed each tick.
    * @param ctx
    * @private
    */
   _behaviour: function (ctx) {
      this.drag.tick(ctx);
   },
   
   _mouseDown: function(event, evc, data) {
      //set the initial drag position
      this.drag._mouseDragStart = this.mousePosWorld();
      this.drag._entityDragStart = this.worldPosition();
   },
   
   _mouseUp: function(event, evc, data) {
   
   },

   tick: function (ctx) {
      //each tick get the new mouse pos
      var mousePos = this.mousePosWorld();
      //and set the entity pos accordingly
      //...
   }
});

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = IgeDragDropComponent; }
User avatar
Doidel
 
Posts: 59
Joined: Tue Jan 14, 2014 5:05 pm

Re: Quiz Drag & Drop

Postby Genestealer » Tue Mar 18, 2014 5:26 pm

Hi,

Thanks for your reply !

I already did that and i have a bug.
The button moves only on right and on bottom i the window even if we use the methods .left(), .right(), .bottom() and .top() with detection of the position of the mouse / position of the button.

Code: Select all
new IgeUiRadioButton()
                        .id('lol')
                        .left(10)
                        .height('5%')
                        .top(30)
                        .width('15%')
                        .texture(ige.client.loader.gameTexture.verb)
                        .show()
                        .mount(ige.$('uiScene'))
                        .mouseDown(function(event){
                            ty = true;
                            console.log('clickdown');
                            ige.$('lol').mouseUp(function(){
                                ty = false;
                                console.log('clickup');
                                ige.input.stopPropagation();
                            });
                            ige.input.stopPropagation();


                        })
                        .mouseMove(function(event){


                            if (ty == true)
                            {

                                console.log(ige.$('lol'));
                                console.log('x :' + event.clientX + ' --- pos mouse x ' + posmousex);
                                console.log('y :' + event.clientY + ' --- pos mouse y ' + posmousey);

                                if (posmousex > event.clientX)
                              ige.$('lol').left(-1 * event.clientX);

                               if (posmousex < event.clientX)
                                 ige.$('lol').left(event.clientX);

                              if (posmousey < event.clientY)
                                  ige.$('lol').top(event.clientY);
                              else if (posmousey > event.clientY)
                                  ige.$('lol').bottom(event.clientY);

                              posmousex = event.clientX;
                              posmousey = event.clientY;

                              ige.input.stopPropagation();
                            }

                        })



Thank you.
User avatar
Genestealer
 
Posts: 5
Joined: Sun Mar 16, 2014 5:36 pm

Re: Quiz Drag & Drop

Postby robaldred » Wed Mar 19, 2014 12:32 pm

I've found some issues with positioning and the UiEntities too.
Try calling
Code: Select all
this._updateStyle();

after you do the work to reposition.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: Quiz Drag & Drop

Postby Genestealer » Mon Mar 24, 2014 5:07 pm

hi,

it works !
i can drag and drop a button ! It's a start to create a quiz on my own.

thank you !
User avatar
Genestealer
 
Posts: 5
Joined: Sun Mar 16, 2014 5:36 pm

Re: Quiz Drag & Drop

Postby robaldred » Mon Mar 24, 2014 5:57 pm

You're welcome, good luck with your quiz project :)
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: Quiz Drag & Drop

Postby ChrisEt » Sun Aug 31, 2014 1:10 pm

Hi guys,

thank you for the help to get started. I wanted to share the final code I've come up with in order to help others get this done more quickly (helping and getting help is the main idea of this forum, I guess).

Code: Select all
var DragDropComponent = IgeClass.extend({
   classId: 'DragDropComponent',
   componentId: 'drag',

   init: function (entity, options) {
      this._entity = entity;

      this._mouseDragStart = null;
      this._entityDragStart = null;
      this._dragging = false;
     
      entity.on('mouseDown', this._mouseDown, entity);
      entity.on('mouseUp', this._mouseUp, entity);
     
      // add the dragMove behaviour to the entity
      entity.addBehaviour('dragMove', this._performDrag);
   },

   _mouseDown: function(event, evc, data) {
      // set the initial drag position
      this.drag._mouseDragStart = this.mousePosWorld();
      this.drag._entityDragStart = this._translate.clone();
      this.drag._dragging = true;
   },
   
   _mouseUp: function(event, evc, data) {
        this.drag._dragging = false;
   },

   /**
    * The behaviour method executed each tick.
    * @param ctx
    * @private
    */
   _performDrag: function (ctx) {
        if (this.drag._dragging) {
            // each tick get the new mouse pos
            var mousePos = this.mousePosWorld();

            var toX = this.drag._entityDragStart.x + mousePos.x - this.drag._mouseDragStart.x,
                toY = this.drag._entityDragStart.y + mousePos.y - this.drag._mouseDragStart.y,
                toZ = this.drag._entityDragStart.z;
               
            // and set the entity pos accordingly
            this.translateTo(toX, toY, toZ);
        }
   }
   
});

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = DragDropComponent; }


I based my code mainly on Doidel's skeleton code. In order to use it, e.g. to make a window 'draggable' you just need to do something like that:

Code: Select all
var window = new IgeUiElement()
    .id('window')
    .left(400)
    .top(150)
    .width(300)
    .height(400)
    .styleClass('GUIWindow')
    .addComponent(DragDropComponent)
    .mount(self.uiScene);
ChrisEt
 
Posts: 17
Joined: Thu Oct 24, 2013 8:59 pm

Re: Quiz Drag & Drop

Postby robaldred » Sun Aug 31, 2014 1:21 pm

Brilliant, it looks great thanks for sharing!
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron