Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / [AgkSharp][Tutorial] Extending the WinForms Example - 'Particle Editor'

Author
Message
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 21st May 2018 05:20 Edited at: 2nd Jun 2018 06:43
AgkSharp Tutorial

Extending the Particle Editor




Part 1 - Inserting the alpha value in ColorKey




What do you need?
Visual Studio with C# components is installed.
and the AgkSharp examples. (unzipped on your hard drive).

This is a beginner's tutorial.

Load the particle editor from the sample folder into your Visual Studio environment. Normally it is enough to double click on the .vcproj file.
After the project is loaded, another double-click on AgkFormsTemplate.cs in Solution Explorer will open the Designer.
Select a control from the toolbox that fits our purpose best. It shouldn't take up much space, because we don't have much space. It should be able to assume a value between 0 and 255 and should also show this. I recommend the NumericUpDown control. Select it and click on the desired place in the Designer. Adjust the size and position of this control and, if necessary, the other controls. It should now look similar to the picture above.
Now define the properties of the control:
Minimum = 0, Maximum = 255, Value = 255, Name = UpDown_ColorKeyAlpha and Enabled = false.

Double-clicking on the NumericUpDown control it creates a standard method for handling the event ValueChanged. Visual Studio changes the view automatically to display the method in the code editor.
Now unfold the #region Particle ColorKey and move the created method to this #region. This is only for better readability and overview.

We will now write the code for this method. What should the code do if the value in our control changes?
The alpha value is encoded in the color value (the last 8 bits. 24-31). We have to delete these bits from our color value with the AND logic (color & 0x00FFFFFF). The alpha value of our control is an 8-bit value (0 - 255). These bits must be moved to the correct position. Left shift of the alpha value by 24 bits (alpha << 24). Now you can merge both values as a resulting color value a logical OR will do this (color | alpha ).





Here we need to change or add some lines in our methods.

Some lines can be commented out or deleted. The UpdateColorKeyControls method is used to perform this functionality.
Here we complete the color value with the alpha value. First we delete the alpha component, move the alpha value and merge the values as described above.

Method: Button_ColorKeySelect_Click




By clicking on AddColorKey we activate the control UpDown_ColorKeyAlpha. There are also some lines that we can comment out or delete. Do not forget to insert the UpdateColorKeyControls method.

Method: Button_AddColorKey_Click




Our new control system must also be updated. And the color selection button should display an eight-digit hexadecimal number.

Method: UpdateColorKeyControls




If we delete all the ColorKeys, we have to deactivate the control.

Method: Button_ColorKeyClear_Click



That was the first part of the tutorial. After each part I give you the chance to ask questions and discuss them. Questions and answers are open to everyone.

Note: Writing is not really my strong point and certainly not in English. Please forgive my grammar.

I hope you're still having fun. I look forward to a great discussion.

Discussion about part 1?:

Jump to Part 2
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 23rd May 2018 17:10 Edited at: 23rd May 2018 17:10
Are you saying with this we can actually embed an AppGameKit display (with all of the functionality available such as sprites, particle emitters etc) inside a C# Windows Form application?

If so... this is fantastic. We get the incredibly easy to use C# GUI building combined with the power & ease of AppGameKit audio visuals. No game engine I have used can match that combination. Most have a clunky set of GUI tools / commands available that are nowhere close to what is available in a .Net form app.
TI/994a (BASIC) -> C64 (BASIC/PASCAL/ASM/Others) -> Amiga (AMOS/BLITZ/ASM/C/Gamesmith) -> DOS (C/C++/Allegro) -> Windows (C++/C#/Monkey X/GL Basic/Unity/Others)
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 23rd May 2018 19:28
GarBenjamin wrote: "Are you saying with this we can actually embed an AppGameKit display (with all of the functionality available such as sprites, particle emitters etc) inside a C# Windows Form application?"

Yeah, that's what I'm saying.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
Tumira
8
Years of Service
User Offline
Joined: 28th Oct 2015
Location:
Posted: 28th May 2018 07:22 Edited at: 28th May 2018 07:25
The numeric updown properties name should be "UpDown_ColorKeyAlpha" not just "ColorKeyAlpha".

I think TGC should make this tier3 or maybe as a dlc ?

Can we use the AGKScreen in multiple winforms ? Maybe I want to make a 2D/3D editor for my games.
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 28th May 2018 12:55
Quote: "The numeric updown properties name should be "UpDown_ColorKeyAlpha" not just "ColorKeyAlpha". "

You're right. Thank you. I'll change that in a minute.

Quote: "I think TGC should make this tier3 or maybe as a dlc ?"

That will turn out. It depends on how much the community is interested in AgkSharp.
Who knows what the future brings.

Quote: "Can we use the AGKScreen in multiple winforms ? Maybe I want to make a 2D/3D editor for my games."

I'm afraid not, because AppGameKit can only manage one OpenGL context.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 2nd Jun 2018 06:14 Edited at: 2nd Jun 2018 06:17
Okay. There doesn't seem to be any open questions.
So now I will post the second part.

Part 2 - Loading And Saving The Effect




To insert these two buttons, as you can see here in the picture. We need some space again. To do this, we reduce the size of the panel above the emitter control. In the designer, it is called 'panel1'. For this we only need to mark the panel (click once on it), now the height can be changed in the properties window (Size.Height = 400). All other emitter control elements can then also be moved upwards. Simply drag a frame around all controls while holding down the mouse button and then move it upwards.
Now we have enough space below for the load and save buttons. Select buttons from the toolbox and create a button for saving and loading. Now move it to the right position. Label the buttons (Text = Load Effect / Save Effect). Name the buttons (Name = Button_Load / Button_Save).

Since we want to save something, we need an additional save dialog. Simply select „Dialogs -> SaveFileDialog“ in the toolbox and click into the designer. The dialog is automatically added at the bottom. Edit the properties (DefaultExt = pfx; Filter = Particle-Effect|*.pfx) These are the default settings which file format should be used. Here is an imaginary format p=Particle and fx=Effect.

Now the programming continues. A double click on the Save button opens the code editor.
First, the initial directory is set.


Then the dialog can be opened.



Now at the latest, you need to think about how the data will be stored. We could save in binary, plain text, XML, JSON format. Just to name a few.
I choose JSON for the simple reason that AppGameKit can read this format without much effort. Unfortunately CSharp does not install a library to work with JSON files. Don't worry, we don't have to write our own handler now. With the NuGet tool we can install this library, but also many others.

That's how it works:
1. Right click in the Solution Explorer on „References“ in the 2DParticleEditor project.
2. Select „Manage NuGet Packages ...“.
3. Select „Browse“.[u][/u]
4. Find and Select „Newtonsoft.Json“.
5. Click Install.
6. Confirm all query boxes.



The installation of the JSON library is finished.

Now we can continue with the code. At the beginning of the code file (AgkFormTemplate.cs) we will add two #using references.
The first entry is used to access the JSON library. The second for general I/O operations. So that these prefixes do not always have to be written to use classes or commands from this library.


The CEmitter class and all connected structures have been provided with the [Serializable] option. This makes converting class-/structure data to JSON format very easy.


With this command we get all emitters within the effect list as a JSON string, which must simply be saved.


The entire code for saving should now look like this.



Loading the effect file is similarly simple. I hope the code is self-explanatory.


Another consideration is to the filename of the particle image. Up to now, the complete path is saved with drive letters. This is unfavorable, if this effect file is to be loaded in another project and the path on another system is different. So we will only save the image file name without the path. To do this, we change a line in the Button_LoadImage_Click method.


The complete function now looks like this.


After loading an effect file, the emitter controls must also be updated.

void UpdateControls()

Since we have changed the file name of the image file. The method for loading the image file, for the preview must still be changed.

void UpdateControls()

The method Create must also be changed in the CEmitter class. A parameter is added to the method so that a path can be passed in which the image files are located. Then the path and the image file must be connected.


Since the CEmitter.Create method has an additional parameter, its calls in the Button_Play_Click method should also be modified.


A small change in the Button_CreateEmitter_Click method has also been made.


That was all for part 2. Load and save should now work as intended.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
BHoltzman
21
Years of Service
User Offline
Joined: 29th Aug 2002
Location:
Posted: 3rd Jun 2018 17:40
I still have a great deal of interest in this project. I'll be in crunch mode for the next month I think. Then I'll be working less then 80 hours a week for a while and have more time to participate here. Please do not take my lack of time right now as disinterest! I want this project to succeed and am hopping that TGC will adopt it as an official DLC with full commitment and frequent updates etc..

Keep the activity going everyone!
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 17th Jun 2018 05:49
@BHoltzman
I think almost everyone here does programming with AppGameKit as a hobby. And I know the job and the family have priority.
I thank all those who support this project.



Ok, here the last part of this Tutorial. >How to use the emitters from the particle editor<.

Part 3 - Using the Particle Effect File


In a C# / AgkSharp project

Using the effect file in C# with AgkSharp is a very easy task. When the AgkSharp templates are installed.
After creating a new AgkSharp project, all existing media can be deleted. Copy the particle image(s) and the effect file(s) from the media folder of the ParticleEditor, in the media folder of the project.
The CEmiter class (CEmitter.cs) can be copied from the particle editor into your project. The namespace entry in CEmitter.cs must be adjusted according to the project.


Becomes for example …



Since we want to load a JSON file here, the Newtonsoft-Json reference must be added via NuGet again. How this works has already been described in part 2.
In the file Program.cs you can delete the unnecessary lines, in Core.CreateWin32Window you can also change the title and add these entries at the beginning of the file.



Before the AppGameKit loop ( while (Core.LoopAGK()) ), you can insert these lines. A list object is required for all emitters in the effect. The effect file is loaded into the json string. Then the string is deserialized to the list object MyEffect.
In the for loop, all emitters are started to play the effect.


That's it.



Program.cs now looks like this.



For a more elegant solution and better reusability, a new class should be written that loads and plays the effect. A new class will be created via "Project->Add Class ...". I choose CEffect as the class name.
The three using references described above are now added to this file.



The class needs a list object - to manage the emitters, a variable pointing to a directory where the images of the particles are located, and the start id in which ID space the effect is created.


Note that this is only a simple implementation (particle id is equal to image ID).

The image path and the StartID are set via the constructor.



A method to load the effect is required.


Just as playing and stopping an effect.


The code could be something like this.

CEffect.cs

And the main program changes to this.

Program.cs


In a AGK-Tier 1 / AGK-Basic project

Using the particle effect file in an AGK-Basic project is a bit more complex. Here, all structures and classes must be transformed into UDTs. Note that int, uint and bool become integer. This is what these structures look like.



Only the data components are taken from the classes. As you can see here.



The methods of the classes must now be rewritten to AppGameKit functions. It starts with the method CEmitter.Create together with the methods CEmitter.SetColorKeys , CEmitter.SetScaleKeys and CEmitter.SetForceKeys.




The effect class must also be rewritten.




Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)

Attachments

Login to view attachments
PartTimeCoder
AGK Tool Maker
9
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 17th Jun 2018 09:30 Edited at: 17th Jun 2018 09:41
Quote: "Are you saying with this we can actually embed an AppGameKit display (with all of the functionality available such as sprites, particle emitters etc) inside a C# Windows Form application? "


@MadBit

This is very interesting indeed, I embedded AppGameKit into a PureBasic framework but I lost certain functionality from AppGameKit, namely GetRawKey* and GetRawMouse*, these functions refused to register as the AppGameKit window was parented to a PureBasic container gadget and PB was stealing the events, and I had to override them with exported functions from the plugin framework, can you confirm these functions work inside the AGKSharp winforms framework?
MadBit
VIP Member
Gold Codemaster
14
Years of Service
User Offline
Joined: 25th Jun 2009
Location: Germany
Posted: 17th Jun 2018 12:35
With the WinForm template which I supplied, I did without the loop through of the inputs. Since I assumed that with a WinForms project the input is processed via WinForms.

But you can implement it yourself quickly and easily. The inputs are looped through in the standard template. Simply copy and adjust the functions should suffice.
Share your knowledge. It\'s a way to achieve immortality. (Tenzin Gyatso)
PartTimeCoder
AGK Tool Maker
9
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 17th Jun 2018 14:00
Well yea I guess most of the input would be processed on the winform side but I am thinking of an editor where selection and movement of sprites and objects would be handled by AppGameKit so winforms and AppGameKit would be working in unison to create the whole functionality.

I will look through the examples and have a play with some code

Login to post a reply

Server time is: 2024-04-25 02:55:30
Your offset time is: 2024-04-25 02:55:30