[Plugin] Drag'n'Drop zone

0 favourites
From the Asset Store
The I18N (Translation) is a Construct plugin created to translate text in game.
  • HEre's a plugin that leverage the possibility for browser to handle the drag'n'drop of a file from outside the browser, inside the page.

    <img src="https://dl.dropbox.com/u/1412774/DragNDropZoneDemo/demo.png" border="0">

    With that plugin, you can drag Images in your game, and get back a base64 string, that you can load in any Sprite. Therefore, your user can customize an avatar with dragging one of his image inside the game, for example !

    All the image format currently supported by the browser are supported by the plugin. (Don't forget to catch the "On Image Loaded" event, the image can be laoded by the browser some time after the end of the "On drop" event).

    You can also load some text file, and handle the result as a classic text string. File format are plain txt,html/htm,xml, and SVG (viewed as an XML, not an image, here !)

    If you set the zone as "invisible", you can't drag any new file until you set the zone "visible" back again.

    In the example .capx, I also show how to handle wrong a filetype dragged over a drag'n'drop zone (for example an image on a text drag'n'drop zone).

    At the edit time, you need to set if you want your zone to access image files, or text files. In the future, I'll add support for more varied file type.

    You can also specify a CSS string for the styling.

    The demo : https://dl.dropbox.com/u/1412774/DragNDropZoneDemo/index.html

    The plugin : https://dl.dropbox.com/u/1412774/DragNDropZoneDemo/pode_dragndrop_zone.1.0.zip

    The .capx : https://dl.dropbox.com/u/1412774/DragNDropZoneDemo/DragNDropZoneDemo.capx

  • Great Pode!!!

    Keeping the good work.

  • Amazing.

  • Been waiting for this plugin...great work Pode.

  • Exactly what I was looking for thanks Pode

  • Pode

    I am using this plugin in my app.

    I got it to load and replace a sprite image.

    However, i need to load each image only for a selected instance of a sprite.

    To explain:

    In my app i have multiple instances of the same sprite.

    All have their own name.

    I select a sprite instance "by its name".

    Load the image via the drag & drop zone into the sprite.

    But what happens is "all" the instances of that sprite are getting the image that was dropped into the zone.

    (My goal is to give all sprite instances their own loaded image.)

    Now the question here is, does this have to do with the: Load image from URI.

    Which means the load image from URI event isnt programmed to load "per instance"

    Or does it have to do with something in the plugin?

    Here is a Capx

    This one is a modified version of your own demo.

    It shows that when loading a sprite into a specific instance.

    The other instances become black and are unloaded.

    "Which is not correct either"

    In contrediction to the above capx, my own app loads the same image for all sprite instances. (as in image clones)

    Now the only difference between the modified demo capx and my own.

    Is that with the modified one the instances are chosen by number.

    While in my app the instances are compared by name "stored as a variable".

    Can u shed some light on this matter?

    Thanx for any help!

    Kind Regards.


  • I need to add the ability to change only one instance, or all of them...

    For your second problem, I'm on a mac here at work so I can't open .capx file, so I don't really understand your problem. I'll try to check that at home...

  • Pode

    I need to add the ability to change only one instance, or all of them...

    It would be great if u can add that ability to this plugin <img src="smileys/smiley32.gif" border="0" align="middle" />

    And i presume that would solve both the issues i mentioned.

    Kind Regards.


  • Pode

    If its possible, then it would also be a great feature to be able to set the frame number to where the instance image is set.

    Then the users of my app can insert images for separate frames of the sprite instance.

    As in.

    Sprite instance 3 is selected & animation frame 2 is selected.

    Dropping image in drag&drop zone.


    Image is set as frame 2 of sprite instance 3.

    Hope my explanation is understandable ;-)

    Is this a do-able feature?

    Kind regards.


  • Savvy001 : in fact, it's not a feature of the Drag'n'Drop plugin, it's a feature of the Sprite itself. Since it's in the "Sprite" that we say "load Image from URL", if Ashley hasn't set a way to give a specific frame number, we don't have that possibility.

  • Pode

    It is solved!

    Check Topic

    Demo Capx

    Thanx for the help!

    And the great plugin <img src="smileys/smiley32.gif" border="0" align="middle">

    Kind Regards.


  • Hi Pode.

    I have a other question, maybe u have a solution.

    Is there a way to cut the pictures users upload via the drag & drop Zone.

    I need them to be cut as a sphere at 190 px.

    So no square images.

    To goal is to make the pictures of their heads to become planets.

    Is this possible?

    Kind Regards.


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • : for that, you need to "edit" the pixel of the images. I have a behavior there : scirra.com/forum/behavior-sprite-effects-inject-text-on-sprite_topic51516_page1.html to edit images, but I didn't add for the moment the "crop as circle iamge". I'll add it in the future.

  • Thats great!

    I'l check the behaviour tonight.


  • Pode and Savvy001 would this work on a mobile device somehow? Since there is no way to drag and drop something over it. Would it be possible to load an image from the device?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)