-
Notifications
You must be signed in to change notification settings - Fork 892
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Idea - integrate Piskel/other pixel art editor in newIDE #470
Comments
@4ian would you be ok with the idea? I can give it a try in the weekend if there is time. This might be a little over my head, but it's definitely going to improve the workflow - especially for rapid prototyping They have an example on how to embed piskel in a website |
Let's give it a try! |
Awesome 😃 I am still planning on how to do it in the least intrusive way with keeping piskel sepparated in its own folder and not disturbing the current functionality in gdevelop's spriteeditor. |
Yes that's a challenge indeed. For a first version, I guess opening Piskel in a separate window/frame would be perfect and easier. |
I made some progress today - adding a button and a function to it Perhaps even going with https://material.io/icons/#ic_brush instead, as the pencil can be seen as 'edit' more than draw Also cloned and built the newest version of piskel with gradle - replacing the three year old version their embedding example is using @4ian where should I place piskel editor's folder within the newIDE/src? My idea is to keep it vanilla with their releases- so we can easily update our copy when they update theirs. Whats great about it is that it can be loaded modularily without messing with any of the src. Its great! Really beautiful design For file opening, the embedding example directly loads images from base64 png strings. One thing I can try is get a list of the animation clip images - get them as an array of base64 png strings and load them into piskel- but thats jumping a little bit too ahead. You can see it here btw all I need to do is to construct an array for the frames |
Looks like a good start :)
Try both and see if it works. public/External/Piskel might be easier to start with and it won't interfere with the newIDE codebase.
Yes good idea :) Please don't do any changes for now to Piskel, updating it should ideally be as simple as copy/pasting the sources of a new version. |
Thank you. Hopefully src would work. :) Btw since Piskel uses middle click navigation too - it will be consistent with my previous commits and gdevelop's navigation design In terms of file size- piskel's latest version will add 2 mb |
Ok I am trying to call piskel's index.js to pop up in another window from spriteList.js, looking at how this seems to be done for the add a new resource window:
I am scratching my head as to how exactly that works 😖 As a side note I made a simple index.js for piskel |
Here is my progress btw: I added piskel to its own external folder and also made a button and function to open it. Trying to open it in a new window fails though- it just opens a new session of gdevelop editor instead. Piskel works when loaded independently though. You can try it by dragging and dropping the index.html file into your web browser |
Will check that tomorrow. Check out Electron BrowserWindow API to open
windows :) Also double check that the path to open is valid.
It should be relative to localhost:3000 in dev mode. See main.js for how
the editor is open
…On Sun, 29 Apr 2018, 18:04 Todor Imreorov, ***@***.***> wrote:
Here is my progress btw:
https://github.com/blurymind/GD
I added piskel to its own external folder and also made a button and
function to open it. Trying to open it in a new window fails though- it
just opens a new session of gdevelop editor instead.
I am kind of stuck there.
Piskel works when loaded independently though. You can try it by dragging
and dropping the index.html file into your web browser
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#470 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ABOIgg_G9mX8AU0NqhVDbml2M5NdTkOyks5tteSIgaJpZM4TX9JL>
.
|
@4ian I got it to open, just as you say- by moving it to public/external/Piskel :D I learned about arrow functions and a bit more about reactjs today One thing that worries me a bit is the user updating the order of frames in gdevelop, while they have them opened for editing in piskel- ideally when piskel opens an animation, it should also lock it for editing in gdevelop. I guess its not a big deal actually- as piskel should overwrite whatever changes they make in gdevelop upon saving I need to pass to piskel a list of image paths of the frames in the animation clip now |
Ok Now It also passes some test animation data straight to piskel once opened This is the format atm: The sprite data is a string... The png base64 part translates to this: A better route to take of course is to re-write the function to simply load the frame files into piskel frames Will investigate alternative ways to load it into piskel, but first need to figure out how to get a list of the images of the animation being edited. It loads sonic atm, but I want to get it to load whatever animation frames are in the animation edited |
Ok, I now figured out how to get some stuff from gdevelop's animation clip (direction):
When adding a new frame to gdevelop animation clip, the image retains its original path - it seems. |
Use Note that the images contained in the sprites are name of resources. (which are by default set to the filename of the file, but it could be anything). That's why you need to use ResourcesLoader, which helps you, given a You can see it being used in ImagePreview: https://github.com/4ian/GD/blob/master/newIDE/app/src/ResourcesList/ResourcePreview/ImagePreview.js#L78 or to get the thumbnail of a Sprite object: https://github.com/4ian/GD/blob/master/newIDE/app/src/ObjectsRendering/Renderers/RenderedSpriteInstance.js#L72 |
Ah thank you ! I just figured it out and then you confirmed it. What would then be left is to write a function that writes the files back when saving in piskel |
Cool!! :) |
A bit more information in case you need to use Node.js API to write file: You'll want to use the Note the use of Apart from projects, GD5 currently do not write any other files on disk if I'm not mistaken. You might want to create a similar file ( To save a base64 file, this Stack Overflow response looks good: https://stackoverflow.com/questions/6926016/nodejs-saving-a-base64-encoded-image-to-disk |
Ah thank @4ian , I will need more time to get this loading the images. |
to add to the frustration, this code breaks in electron version
but works in web version |
To debug, you have to be more precise about "this code breaks":
For now you should concentrate on the electron version, because for the webapp adding external resources is not yet supported, so I doubt we'll be able to do this with Piskel. I know it's frustrating but don't be discouraged: this is a hard task that you're making because you're making interactions between windows and this is something that is especially hard (or even impossible on the web) (hence the need for Electron) for security reasons. |
I get I think the browserwindow api is the way to go. Will investigate tomorrow :) I wonder if I somehow stitch the pictures and turn them into a base64 string, that would somehow get us around the cross domain security issue It seems to be the easiest way to load stuff into piskel anyway. Image array can also be used- but took ages to figure out how to do it and its still stuck at cross domain security bump Can a new electron browser window object be created from within any js file in src? There seems to be a limitation on that |
Have you try logging the value of But yeah, for now let's forget about window.open and go with BrowserWindow. |
Ah sweet! I will try this tomorrow. I was importing it wrong before, thats why it didnt work Logging it works in web app, but probably undefined in electron app, even though piskel gets successfully opened in both |
If you look at main.js, here is how it's done for index.html: In particular, look at the options of BrowserWindow: const options = {
webPreferences: {
webSecurity: false, // Allow to access to local files
},
}
// ...
mainWindow = new BrowserWindow(options);
//...
if (isDev) {
// Development (server hosted by npm run start)
mainWindow.loadURL('http://localhost:3000');
mainWindow.openDevTools();
} else {
// Production (with npm run build)
mainWindow.loadURL('file://' + __dirname + '/www/index.html');
if (devTools) mainWindow.openDevTools();
} Can you try something like webPreferences: {
webSecurity: false, // Allow to access to local files
}, In all case, root folder is |
Ah thanks. This is all very new to me. |
Did you delete a message? I can't see your previous one. And/or send me the link to the branch and I see what I can do. :) |
@4ian yeah, I thought that it wasnt right and wanted to avoid misleading the cause of the issue. Still, even with I was wondering is using this would help |
Why is it trying to load |
Thats it! Still not sure how to pass the images with WebContents.executeJavaScript though - since that only takes a string I need to read more on this at home |
Progress report: In order to be able to send signals to it though, I need to import electron and ipcrenderer in its index file . Can I do that without moving it into src? Trying it with
Doesnt seem to do anything- it doesnt get called when in the index file Electron seems to have a function to go outside the folder |
You should be able to use require('electron') in public/* BUT no files is transpiled so you don't have things like
Have you add a console.log to double check that the require is working? |
I got it to send the signal now! The error was initially that I should have been sending it via webcontents. |
Ok great! Indeed it should be sent using |
Progress report: The original Piskel author started helping me out with the file format for piskel. I made a commit to my fork My guess is that I need to append something to the base64 string that I give to piskel After we manage to get it loading the images, I will of course write a function save them back to their original paths or gdevelop's project :) |
Yes you iterating on the images and creating |
Thank you @4ian Progress report, Piskel is now loading gdevelop animation clips: |
Looks super great! 🤩 🤩 🤩 |
Ah Thank you =) |
|
I wonder what the best way to do this is. |
For now we might want to consider that GDevelop is disabled when Piskel is opened, so no changes to the animations can be made by the user? Because I don't see how we can track which animation has been opened. |
Awesome! Great job again :) For reloading the animation frame, you may want to call |
@4ian thank you :) Btw I think this will need clearing the frame list of the edited animation and loading the new file paths into it from piskel - to accomodate for any new frames created in piskel - or frame reorders in piskel. I have the ipcrenderer signal ready with updated filepaths array for that :} But I will need to find out how to determine which animation index is being edited in piskel and also find out how to clear it and load the frames from the new list commit here https://github.com/blurymind/GD/commit/fe261af9abebdcc5a33bfe54bc60b358191bf92b |
Small Update today:
Will do commit later Plan now:
|
Ok I am ready! Here is the commit- I used this as example how to load resources btw @4ian Thank you for the patience. |
You can open a Pull Request so that all your commits are grouped together and can be reviewed and merged later when they are ready :) |
Also try to run prettier on the files that you've done so that they are automatically formated (huge time saver and this unify the code style). In any case, thanks for your huge work on this and the time passed! I'll review it and for the changes, I can either comment or do the changes by myself if it's too hard to explain maybe. |
did some more cleanups Will also do prettier @4ian the master branch is ahead of my branch. I need to merge changes from you as well |
No, no need to merge the changes before creating your PR :) Great! Bug hunting is always a good idea, because I think we can find edge cases. |
Will do some testing tomorrow and some more cleanups. Then do the commit in the weekend - just in case. |
I made a pull request here: |
Sure thanks for the PR! 👍 |
Piskel is now a part of gdevelop! With the pull request merged now - I can close this issue |
The ability to create and edit sprites - right inside gdevelop would be absolutely awesome to have - especially for game jam events
There already is a number of excellent open source html5 pixel editors that gdevelop could take advantage of.
I personally like https://www.piskelapp.com/ for its simplicity and power.
Here is their github - using the apache license
https://github.com/piskelapp/piskel
there is a nodejs prebuilt desktop version too - so it can be done:
https://github.com/piskelapp/piskel/wiki/Desktop-applications
I wonder how dificult it would be to integrate it with gdevelop's animation frames editor - to open/create frames with piskel, while also keeping piskel in it's own standalone folder that can be kept updated independently
I also posted at their tracker to gather feedback
piskelapp/piskel#805
Basically I want it to be able to:
Try to keep piskel's code as vanilla as possible in its own folder, so we can update it with their branch.
Try to to do it in the least intrusive way to gdevelop's newIde
The text was updated successfully, but these errors were encountered: