Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[HTML5] Easier HTML templates, better canvas size handling #46200

Merged
merged 2 commits into from Feb 19, 2021
Merged

[HTML5] Easier HTML templates, better canvas size handling #46200

merged 2 commits into from Feb 19, 2021

Conversation

Faless
Copy link
Collaborator

@Faless Faless commented Feb 19, 2021 •
edited

In this PR:

HTML Templates

Improving on the proposal, now the minimum JS code is just the collowing:

var engine = new Engine($GODOT_RUN_OPTIONS);
engine.startGame();

The minimal HTML example is as folowing:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="$GODOT_URL"></script>
		<script>
			var engine = new Engine($GODOT_CONFIG);
			engine.startGame();
		</script>
	</body>
</html>

You'll be able to set overrides during start and startGame phases, e.g.:

engine.startGame({
	"onExit": function (code) {
		alert("Game exited...");
	}
});

There are 2 additional tags that are recommended but optional:

  • $GODOT_HEAD_INCLUDE - the custom HTML head include.
  • $GODOT_PROJECT_NAME - for the project title (if you want to set it as the title in the page for better browser caching).

Canvas Size

The full window option is now renamed to Canvas Resize Policy and is a 3-state enum:

  • None: Godot window settings are ignored.
  • Project: Godot handles the canvas like a native app (resizing it when setting the window size).
  • Adaptive: Canvas size will always adapt to browser window size.

Use None if you want to control the canvas size with custom JavaScript code.

Both canvas resizing functions and fullscreen functions has been moved to an internal implementation.

Export window screenshot

There is a 3.2 branch that can be tested here: https://github.com/Faless/godot/tree/js/3.x_canvas_size_pr

@Faless Faless added this to the 4.0 milestone Feb 19, 2021
@Faless Faless requested review from a team as code owners February 19, 2021 03:08
@Faless Faless mentioned this pull request Feb 19, 2021
Merged
@Faless
[HTML5] Easier HTML templates, better deinit/cleanup.
2972ea3
@Faless
[HTML5] Better fullscreen, canvas resizing.
65abf94 
Three canvas resize policies:
- `None`: Godot window settings are ignored.
- `Project`: Godot handles the canvas like a native app (resizing it
  when setting the window size).
- `Adaptive`: Canvas size will always adapt to browser window size.

Use `None` if you want to control the canvas size with custom JavaScript
code.
@akien-mga akien-mga merged commit 480c5f2 into godotengine:master Feb 19, 2021
@akien-mga
Copy link
Member

Thanks!

@akien-mga akien-mga mentioned this pull request Feb 19, 2021
Closed
This was referenced Feb 21, 2021
Merged
Merged
@Faless Faless mentioned this pull request Mar 12, 2021
Merged
@Unradelic
Copy link

Typo on description:

...the minimum JS code is just the collowing:"

@Faless Faless mentioned this pull request Apr 29, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@akien-mga akien-mga akien-mga approved these changes

Assignees
No one assigned
Labels
breaks compat enhancement platform:web topic:porting
Projects
None yet
Milestone
4.0
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@Faless @akien-mga @Unradelic