Idea - integrate in gdevelop #805
Comments
blurymind
changed the title
|
Hi, I might need some help here. Does piskel have a DOM function that lets us open multiple file paths as frames of an animation? I have the image paths. |
|
How about: I seem to be doing something wrong here :( |
|
The APIs you are looking at rely on the File API: https://developer.mozilla.org/en-US/docs/Web/API/File You can get File objects from the clipboard, from a drag and drop, or from a file input. I don't know how you plan to integrate Piskel with gdevelop and how gdevelop can communicate with Piskel? If Piskel is supposed to be loaded in an iframe in the same domain as gdevelop, then you can try to forward the images directly as Image objects or using the image data and rely on |
|
@juliandescottes I have it now embedded into the gdevelop elecron app - keeping the vanilla version from this repository. I can send signals to its window, but not yet sure what the best way to load my image paths into piskel as animation. What function can I use to load it? Trying this: gives me the following error: This is the function I use to construct the image array: Will commit the changes to my fork of Gdevelop and share a link later today :) |
|
@juliandescottes I think I am getting closer. Here are the relevant parts sending the data to it I get an error about the file not being the correct format :( |
|
The function you are using, In your current implementation which is your image file as a String, and won't help here. Some other things you could try: 1 - I see you tried creating Images and setting the src to local file path for the image. Seems like this could be a good idea, but I don't know how the security model works in electron apps. Maybe the image can't be used with the canvas for cross origin reasons. You should also normally wait until the load event on the image before proceeding. 2 - Try to read the content of the image file as base 64 (found https://stackoverflow.com/questions/24523532/how-do-i-convert-an-image-to-a-base64-encoded-data-url-in-sails-js-or-generally which seems to answer that but haven't looked into this) and then create an Image with a src using this base64 string. That's basically what we do in Piskel when the user imports Images as files, look in FileUtils::readImageFile for the general idea. Maybe you can even use readImageFile() here? And generally, if you are unsure about how something works, you should have the development version of Piskel running ( |
|
@juliandescottes Thank you for the help. I think that I am finally getting closer! Piskel gives me this error now: It seems to be missing an argument Btw I did a commit here: |
|
The onload event on images is asynchronous, so the array you pass to to createPiskelFromImages_ is empty. You need to wait until all the images are loaded before you call this method. |
|
(GDevelop developer here :)) @blurymind The Here I think you could use |
|
@blurymind Something like this (not tested, just wrote this in 2 minutes based on what you did, also could be improved by using async.map but that should be enough to get you running): const async = require('async');
async.each(imageFrames, function(imagePath, callback) {
label.innerHTML = "loop "+ String(i);
var image64 = new Image();
image64.onload = function () {
image64.src = base64_encode(imagePath);
console.log(image64.src);
imageData.push(image64);
callback();
}
}, function(err) {
console.log(imageData);
pskl.service.ImportService.prototype.createPiskelFromImages_(imageData, "foo",55, 55, false);
}); |
|
Thank you both for the help! :D @4ian for some odd reason image64.onload never actually fires and the array stays empty. It prints out the filled array, then it should trigger piskel to load the images- but piskel loads nothing. Btw I made a commit here: I think we are getting closer! :D |
|
I noticed that Electron is appending to the start of image src the localhost path: Edit, made commit |
|
Can you copy/paste the whole And see if the image is displayed? If no, then it means that the base64 image is malformed for some reason. Otherwise, there must be a problem while loading the image in Piskel. |
|
@4ian I tried it, the string is valid Piskel just doesnt seem to do anything after I load the array into createPiskelFromImages_ now. |
|
Not sure what is wrong. Did you manage to use |
|
@blurymind the string really needs to start with Try to prefix your data urls as follows |
|
I think he already did, according to his latest commit: https://github.com/blurymind/GD/commit/03a08297ab84b7af36e3c28e40375b6b2c35b70f#diff-bf9a6bff2e41cedcd1b65b9fd5849fe4R21 @blurymind Can you console.log and paste there (or on some website like pastebin.com) the entire parameters passed to |
|
Ah thanks I missed the update at the end of the comment. So the issue is that this is still not waiting for the onload. Here is the basic pattern you need to do: img.onload = function () { ... some code you want to execute }
img.src = base64src;The Based on the example from @4ian with the fix mentioned above: const async = require('async');
async.each(imageFrames, function(imagePath, callback) {
var image64 = new Image();
image64.onload = function () {
imageData.push(image64);
callback();
}
// This is the important part! Set src, otherwise the `onload` will not fire
image64.src = base64_encode(imagePath);
console.log(image64.src);
}, function(err) {
console.log(imageData);
pskl.service.ImportService.prototype.createPiskelFromImages_(imageData, "foo",55, 55, false);
}); |
|
Thank you both :)
I am going to try this tomorrow... couldnt get to my laptop today, and now
I am super eager to get the images in piskel
…On Fri, 4 May 2018 20:31 Julian Descottes, ***@***.***> wrote:
Ah thanks I missed the update at the end of the comment.
So the issue is that this is still not waiting for the onload. Here is the
basic pattern you need to do:
img.onload = function () { ... some code you want to execute }
img.src = base64src;
The onload event will be triggered by setting src on the image, so you
cannot have it inside of the onload callback.
Based on the example from @4ian <https://github.com/4ian> with the fix
mentioned above:
const async = require('async');
async.each(imageFrames, function(imagePath, callback) {
label.innerHTML = "loop "+ String(i);
var image64 = new Image();
image64.onload = function () {
console.log(image64.src);
imageData.push(image64);
callback();
}
// This is the important part! Set src, otherwise the `onload` will not fire
image64.src = base64_encode(imagePath);
}, function(err) {
console.log(imageData);
pskl.service.ImportService.prototype.createPiskelFromImages_(imageData, "foo",55, 55, false);
});
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#805 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AGMbVdyqci-O8GaQHkVPOhYLtqjfe6dFks5tvKyrgaJpZM4TX-YP>
.
|
|
@juliandescottes Thank you for the code snippet. Unfortunately it still doesn't do anything. Basically Piskel's window shows up, all of the data collected from gdevelop is sent to it and printed in the console, there are no errors- but nothing happens I made a git commit here: Are we missing something? For a bit I thought that the function createPiskelFromImages_ constructs a piskel object and another one should be used to load it? Is this the best function to use for loading an image sequence? Btw I am pre-loading piskel at the moment, and when called simply show it. But I can change that if its causing possible issues. |
|
Hey! That's better, but we now need to load the Piskel instance created by this method. If you search for createPiskelFromImages_, you can see we get a return value from the method and use it. The method just builds an instance of Piskel that can be used in the application but it doesn't replace the current animation. You need to call piskelController.setPiskel. Have a look at how this is already used in Piskel You can get the current piskelController with
With |
|
@juliandescottes this function is gold! :D commit here: I now need to create a button that will save the changes back to gdevelop and hide Piskel. I need to store their original paths to the frames metadata. So when exporting I can overwrite the original images. In any case, we are getting closer now to full integration. Both apps will work as one 👍 |
|
@blurymind Good job :) If think you might be able to listen for the closing of the Piskel window ( |
|
@juliandescottes I need some way of storing the image's original path inside the frame created from it. The idea is to be able to overwrite any files that were imported from gdevelop when saving and create new files for frames created in piskel. I am still figuring out how to itterate through frames data. Perhaps try the export controller? and/or getFrameCount + getFrameAt to loop through them? I wonder how to best approach this |
|
Ok, a little update: Next step now is to write the files back to their original paths when the save button is pressed or window closed! EDIT: I am now writing the files to their original paths! Will do a comit later today :D All thats left now is tell gdevelop reload the frames in the new order they might be in - which is required on the gdevelop side of the code! |
Ah that's perfect! Good job, look forward to see the commit :) |
|
commit here https://github.com/blurymind/GD/commit/fe261af9abebdcc5a33bfe54bc60b358191bf92b Its still WIP :) Need to come up with a better function to create unique file names for frames created in piskel and not imported from gdevelop |
|
@juliandescottes and @4ian Thank you immensely for the help! Pull request is here: It needs some cleaning up and bug testing of course |
|
Wow that's great @blurymind ! Really impressed with what you achieved here! |
|
@juliandescottes thank you. I wouldnt have done it without your help :) |
|
Piskel Is now a part of Gdevelop 👍 You can cross promote the two projects if you want to. Piskel's website can put gdevelop as one of the engines that get shipped with piskel included - and Gdevelop's website could likewise put a link to Piskel and say that its pixel editing capabilities are powered by Piskel. It would be worth noting that because Piskel is designed so well - it wasn't that difficult to bundle it with gdevelop. I could easily inject new buttons into its header without touching the source code for example. |
gdevelop is an excellent open source game engine for 2d games. It has a great community and developers and shares a lot of traits with piskel:
While gdevelop can be used to set animation frames on a sprite, it can not create or edit frames.
This is where this idea comes in - package gdevelop with piskel included in it's own independent subfolder - with some intermediate code to get gdevelop's newIde to communicate with piskel - use it to create new frames and edit the pixels of existing frames.
I wonder how feasible this is.
In any case I posted this idea at gdevelop's tracker too.
4ian/GDevelop#470
These two projects can really benefit from a partnership imo 👍
Piskel can that way also expand its userbase by expanding to another complimentary platform - a game engine.
The text was updated successfully, but these errors were encountered: