Stencyl 3.4.0 is now out. Get it now!

Web Extension

gurigraphics

  • Posts: 660
Web Extension
Works on HTML5.


Features

1- You can use Google fonts: https://fonts.google.com/
2- You have no more accent problems. You can write in Chinese and Arabic.
3- You can add and remove any elements html on the screen: divs, images, texts, input fields, textareas, etc.
4- You can to resize the canvas and any element.
5- You can drag the canvas and any element.
6- You can use any CSS button: http://www.bestcssbuttongenerator.com/
7- You can use any CSS 3D effect: https://www.youtube.com/watch?v=QcCW_1FkJ9o
8- You can use various features of jQueryUI: https://jqueryui.com/hide/
9- The possibilities are endless.

Get it

- Download this Extension

(How to Install and Update an Extension)


Documentation
----------------------------------------------
Open URL:



Open a URL in same or other tab of browser. And not is blocked as a Popup.

Inputs
- Open URL (as Text)
this: Opens the linked document in the same tab of browser as it was clicked (this is default)
other: Opens the linked document in a new tab of browser
Returns: Either "nothing" for an action block or the value it returns if it's a normal block.

Example: Open "Google page" in same tab of browser when mouse is pressed.



----------------------------------------------
Jquery set CSS:



Change the CSS properties of any page element.

Inputs
- property (as Text)
- value (as Text)
- element (as Text)

Example: Set background color of body page to black.



Example: Centralize horizontally the game canvas in page.



----------------------------------------------
Jquery insert CSS code:



Insert CSS code on the page.

Inputs
- code (as Text)

Example: Set background color of body page to black.



----------------------------------------------
Jquery append:



append:  Add a new element on the page after the last element.
prepend:  Add a new element on the page before the last element.
addClass:  Add a Class to a element.
removeClass:  Remove a Class of an element.
Inputs
- code (as Text)
-to element: (as Text)  - How select a element by ID (#divName), how select a element by class (.classname)

Example: Append an element Div with text to element ID: #openfl-content.



Example: Add Class "myButton" to element ID: #button1.



----------------------------------------------
Import Google font:



Inputs
- code (as Text)

Example: Change font-family style in an element ID: #button1

1- Select a font name in this site: https://fonts.google.com
2- Import font and insert style


----------------------------------------------
Button:



Inputs
- Button text (as Text)
- Class: (as Text)
- ID: (as Text)

Example: Append an button to element ID: #openfl-content in position x-left: 64 y-up:64;



Example: How set the style of button.

1- Make a button in this site: http://www.bestcssbuttongenerator.com
2- Copy the style code of button
Code: [Select]
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
box-shadow:inset 0px 1px 0px 0px #cf866c;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);
background-color:#d0451b;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #942911;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #854629;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);
background-color:#bc3315;
}
.myButton:active {
position:relative;
top:1px;
}
3- Insert the style code in page.



4- Result


Example: How set the events of a button.

1- Create a custon event


2- Call the custon event when the mouse press in button element



----------------------------------------------
Jquery UI

To use this features of JqueryUI: https://jqueryui.com/hide/

Search this archive:
 %root%     Stencyl\plaf\haxe\lib\openfl\openfl\templates\html5\template\index.html
And change by this file: (index.html)

----------------------------------------------
Version History

Version 1.0
18/07/2016 - Block: open URL in this page.
Version 2.0
18/07/2016 - Add new targets: Self, Blank, Parent, Top
Version 3.0
19/07/2016
- Remove targets: Self, Blank, Parent, Top
- Add new targets: this, other
- Implement open in new tab without blocking.
Version 4.0
29/07/2016
- Add 12 new blocks
Version 4.1
04/08/2016
- Block: open URL in this page.  Allow only one click.

« Last Edit: August 04, 2016, 04:06:41 am by gurigraphics »

1MrPaul1

  • *
  • Posts: 1133
Applied the extension, it working fine.

Very useful thing  as long as sponsors not buying flash games now, just HTML5,
in which we can't open any link because it is blocking. But without links we can't to add sponsor branding, site.
So everybody must have this behavior to be able to sell web games or promote their web games.

Thank you gurigraphics!
Youve made my day!
 

gurigraphics

  • Posts: 660
Nice. I update a new version now with all types of target.

1MrPaul1

  • *
  • Posts: 1133
Great!

i tried different options, but it looks that all options working the same(except blank, that  simulate usual open URL block), what is the difference between them?

gurigraphics

  • Posts: 660
Truth. I also did not notice the difference.

Best would be to leave only two options:
Open URL in browser in the same window.
Open URL in browser in another window.

1MrPaul1

  • *
  • Posts: 1133
yes, it will be better.

gurigraphics

  • Posts: 660
Update version 3.0

Now open the same and in another tab of browser without blocking.

Open URL in this tab of browser
Open URL in other tab of browser

It is best to open in another tab of browser of that close the game.
Because, the player can click unintentionally.

LIBERADO

  • *
  • Posts: 2068
Thanks. Downloaded and installed.
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

gurigraphics

  • Posts: 660
I'm doing the version 4.0:



Some new possibilities:

1- You can use Google fonts.
2- You have no more accent problems. You can write in Chinese and Arabic.
3- You can add and remove any elements html on the screen: divs, images, texts, input fields, textareas, etc.
4- You can to resize the canvas and any element.
5- You can drag the canvas and any element.
6- You can use any CSS button
http://www.bestcssbuttongenerator.com/
7-You can use any CSS 3D effect
https://www.youtube.com/watch?v=QcCW_1FkJ9o
8- You can use various features of jQueryUI
https://jqueryui.com/hide/
9- Thus Stencyl becomes better than Construct2 to games Html5.

It is already working here. But need edited the template HTML of Openfl.

The javascript part I already finished. Now I need discover how export a CSS file to folder lib of export game folder.



1MrPaul1

  • *
  • Posts: 1133
Cool!!
Now, we need description how to use it all :)

gurigraphics

  • Posts: 660
Quote
Cool!!
Now, we need description how to use it all :)

It's a lot to explain. I explained only the main.
To use all the possibilities of this extension the way is to study CSS and HTML .
https://www.coursera.org/learn/html
https://www.coursera.org/learn/introcss


« Last Edit: July 29, 2016, 07:40:20 pm by gurigraphics »

gurigraphics

  • Posts: 660
Web Extension 4.0 was launched.

gurigraphics

  • Posts: 660
Demo

https://dl.dropboxusercontent.com/u/35815394/2016/CSS3/index.html



For games that do not require physical the performance of DOM is better than the Canvas in some cases.

DOM
- Work in every browser without problems.
- DOM doesn’t have to be updated and redraw inside the animation loop and doesn’t slow down the FPS.
- Perfect for UI, texts, inputs, scrollbars, etc.

Canvas
- Good to manipulate pixels or particles.
- Good to draw.
- Good to physics.

Canvas Disadvantages:
- The larger the screen and objects, worse the performance.
- The more and larger actors, worse the performance.
- Bad for UI, texts, inputs, scrollbars, etc.

SVG and Bitmap images
- SVG images do not lose quality when resized.
- SVG images make the game assets lighter.
- Bitmap images lose quality when resized.
- Bitmap images are heavy.
- SVG bad to complex images.
- Bitmap good to complex images.

Donni11

  • *
  • Posts: 2095
Awesome! Such a good extension !!

1MrPaul1

  • *
  • Posts: 1133
Hi
really great features
Thanks
ssad that we can't make those amazing effects without  knowledges of HTML5

about core things of the extension
Sponsor asked to open links in he new tabs
but when opening links in the new tab on HTML5 the link is till blocking