Working on web examples
Reorganizing folders Review examples Work on makefile and loader.html
This commit is contained in:
Ray
parent
8374460c39
commit
f7bebf9861
421 changed files with 103013 additions and 524979 deletions
BIN
docs/examples/web/textures/resources/cat.png
Normal file
BIN
docs/examples/web/textures/resources/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
docs/examples/web/textures/resources/parrots.png
Normal file
BIN
docs/examples/web/textures/resources/parrots.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
docs/examples/web/textures/resources/raylib_logo.png
Normal file
BIN
docs/examples/web/textures/resources/raylib_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
docs/examples/web/textures/resources/scarfy.png
Normal file
BIN
docs/examples/web/textures/resources/scarfy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/examples/web/textures/resources/smoke.png
Normal file
BIN
docs/examples/web/textures/resources/smoke.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
105
docs/examples/web/textures/textures_image_drawing.c
Normal file
105
docs/examples/web/textures/textures_image_drawing.c
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [textures] example - Image loading and drawing on it
|
||||
*
|
||||
* NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
|
||||
*
|
||||
* This example has been created using raylib 1.4 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2016 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
Texture2D texture; // Texture, GPU memory (VRAM)
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [textures] example - image drawing");
|
||||
|
||||
Image cat = LoadImage("resources/cat.png"); // Load image in CPU memory (RAM)
|
||||
ImageCrop(&cat, (Rectangle){ 100, 10, 280, 380 }); // Crop an image piece
|
||||
ImageFlipHorizontal(&cat); // Flip cropped image horizontally
|
||||
ImageResize(&cat, 150, 200); // Resize flipped-cropped image
|
||||
|
||||
Image parrots = LoadImage("resources/parrots.png"); // Load image in CPU memory (RAM)
|
||||
|
||||
// Draw one image over the other with a scaling of 1.5f
|
||||
ImageDraw(&parrots, cat, (Rectangle){ 0, 0, cat.width, cat.height }, (Rectangle){ 30, 40, cat.width*1.5f, cat.height*1.5f });
|
||||
ImageCrop(&parrots, (Rectangle){ 0, 50, parrots.width, parrots.height - 100 }); // Crop resulting image
|
||||
|
||||
UnloadImage(cat); // Unload image from RAM
|
||||
|
||||
texture = LoadTextureFromImage(parrots); // Image converted to texture, uploaded to GPU memory (VRAM)
|
||||
UnloadImage(parrots); // Once image has been converted to texture and uploaded to VRAM, it can be unloaded from RAM
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(texture); // Texture unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTexture(texture, screenWidth/2 - texture.width/2, screenHeight/2 - texture.height/2 - 40, WHITE);
|
||||
DrawRectangleLines(screenWidth/2 - texture.width/2, screenHeight/2 - texture.height/2 - 40, texture.width, texture.height, DARKGRAY);
|
||||
|
||||
DrawText("We are drawing only one texture from various images composed!", 240, 350, 10, DARKGRAY);
|
||||
DrawText("Source images have been cropped, scaled, flipped and copied one over the other.", 190, 370, 10, DARKGRAY);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/textures/textures_image_drawing.data
Normal file
BIN
docs/examples/web/textures/textures_image_drawing.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 668 KiB |
239
docs/examples/web/textures/textures_image_drawing.html
Normal file
239
docs/examples/web/textures/textures_image_drawing.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="textures_image_drawing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
43912
docs/examples/web/textures/textures_image_drawing.js
Normal file
43912
docs/examples/web/textures/textures_image_drawing.js
Normal file
File diff suppressed because one or more lines are too long
93
docs/examples/web/textures/textures_image_loading.c
Normal file
93
docs/examples/web/textures/textures_image_loading.c
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - Image loading and texture creation (adapted for HTML5 platform)
|
||||
*
|
||||
* NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)
|
||||
Texture2D texture; // Image converted to texture, GPU memory (VRAM)
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [textures] example - image loading");
|
||||
|
||||
Image image = LoadImage("resources/raylib_logo.png"); // Loaded in CPU memory (RAM)
|
||||
texture = LoadTextureFromImage(image); // Image converted to texture, GPU memory (VRAM)
|
||||
UnloadImage(image); // Once image has been converted to texture and uploaded to VRAM, it can be unloaded from RAM
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
UnloadTexture(texture); // Texture unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTexture(texture, screenWidth/2 - texture.width/2, screenHeight/2 - texture.height/2, WHITE);
|
||||
|
||||
DrawText("this IS a texture loaded from an image!", 300, 370, 10, GRAY);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/textures/textures_image_loading.data
Normal file
BIN
docs/examples/web/textures/textures_image_loading.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
239
docs/examples/web/textures/textures_image_loading.html
Normal file
239
docs/examples/web/textures/textures_image_loading.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="textures_image_loading.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
38410
docs/examples/web/textures/textures_image_loading.js
Normal file
38410
docs/examples/web/textures/textures_image_loading.js
Normal file
File diff suppressed because one or more lines are too long
184
docs/examples/web/textures/textures_image_processing.c
Normal file
184
docs/examples/web/textures/textures_image_processing.c
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [textures] example - Image processing
|
||||
*
|
||||
* NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
|
||||
*
|
||||
* This example has been created using raylib 1.4 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2016 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#include <stdlib.h> // Required for: free()
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
#define NUM_PROCESSES 8
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
typedef enum {
|
||||
NONE = 0,
|
||||
COLOR_GRAYSCALE,
|
||||
COLOR_TINT,
|
||||
COLOR_INVERT,
|
||||
COLOR_CONTRAST,
|
||||
COLOR_BRIGHTNESS,
|
||||
FLIP_VERTICAL,
|
||||
FLIP_HORIZONTAL
|
||||
} ImageProcess;
|
||||
|
||||
static const char *processText[] = {
|
||||
"NO PROCESSING",
|
||||
"COLOR GRAYSCALE",
|
||||
"COLOR TINT",
|
||||
"COLOR INVERT",
|
||||
"COLOR CONTRAST",
|
||||
"COLOR BRIGHTNESS",
|
||||
"FLIP VERTICAL",
|
||||
"FLIP HORIZONTAL"
|
||||
};
|
||||
|
||||
Image image;
|
||||
Texture2D texture;
|
||||
|
||||
int currentProcess = NONE;
|
||||
bool textureReload = false;
|
||||
|
||||
Rectangle selectRecs[NUM_PROCESSES];
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [textures] example - image processing");
|
||||
|
||||
// NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)
|
||||
|
||||
image = LoadImage("resources/parrots.png"); // Loaded in CPU memory (RAM)
|
||||
ImageFormat(&image, UNCOMPRESSED_R8G8B8A8); // Format image to RGBA 32bit (required for texture update)
|
||||
texture = LoadTextureFromImage(image); // Image converted to texture, GPU memory (VRAM)
|
||||
|
||||
for (int i = 0; i < NUM_PROCESSES; i++) selectRecs[i] = (Rectangle){ 40, 50 + 32*i, 150, 30 };
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(texture); // Unload texture from VRAM
|
||||
UnloadImage(image); // Unload image from RAM
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
if (IsKeyPressed(KEY_DOWN))
|
||||
{
|
||||
currentProcess++;
|
||||
if (currentProcess > 7) currentProcess = 0;
|
||||
textureReload = true;
|
||||
}
|
||||
else if (IsKeyPressed(KEY_UP))
|
||||
{
|
||||
currentProcess--;
|
||||
if (currentProcess < 0) currentProcess = 7;
|
||||
textureReload = true;
|
||||
}
|
||||
|
||||
if (textureReload)
|
||||
{
|
||||
UnloadImage(image); // Unload current image data
|
||||
image = LoadImage("resources/parrots.png"); // Re-load image data
|
||||
|
||||
// NOTE: Image processing is a costly CPU process to be done every frame,
|
||||
// If image processing is required in a frame-basis, it should be done
|
||||
// with a texture and by shaders
|
||||
switch (currentProcess)
|
||||
{
|
||||
case COLOR_GRAYSCALE: ImageColorGrayscale(&image); break;
|
||||
case COLOR_TINT: ImageColorTint(&image, GREEN); break;
|
||||
case COLOR_INVERT: ImageColorInvert(&image); break;
|
||||
case COLOR_CONTRAST: ImageColorContrast(&image, -40); break;
|
||||
case COLOR_BRIGHTNESS: ImageColorBrightness(&image, -80); break;
|
||||
case FLIP_VERTICAL: ImageFlipVertical(&image); break;
|
||||
case FLIP_HORIZONTAL: ImageFlipHorizontal(&image); break;
|
||||
default: break;
|
||||
}
|
||||
|
||||
Color *pixels = GetImageData(image); // Get pixel data from image (RGBA 32bit)
|
||||
UpdateTexture(texture, pixels); // Update texture with new image data
|
||||
free(pixels); // Unload pixels data from RAM
|
||||
|
||||
textureReload = false;
|
||||
}
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawText("IMAGE PROCESSING:", 40, 30, 10, DARKGRAY);
|
||||
|
||||
// Draw rectangles
|
||||
for (int i = 0; i < NUM_PROCESSES; i++)
|
||||
{
|
||||
if (i == currentProcess)
|
||||
{
|
||||
DrawRectangleRec(selectRecs[i], SKYBLUE);
|
||||
DrawRectangleLines(selectRecs[i].x, selectRecs[i].y, selectRecs[i].width, selectRecs[i].height, BLUE);
|
||||
DrawText(processText[i], selectRecs[i].x + selectRecs[i].width/2 - MeasureText(processText[i], 10)/2, selectRecs[i].y + 11, 10, DARKBLUE);
|
||||
}
|
||||
else
|
||||
{
|
||||
DrawRectangleRec(selectRecs[i], LIGHTGRAY);
|
||||
DrawRectangleLines(selectRecs[i].x, selectRecs[i].y, selectRecs[i].width, selectRecs[i].height, GRAY);
|
||||
DrawText(processText[i], selectRecs[i].x + selectRecs[i].width/2 - MeasureText(processText[i], 10)/2, selectRecs[i].y + 11, 10, DARKGRAY);
|
||||
}
|
||||
}
|
||||
|
||||
DrawTexture(texture, screenWidth - texture.width - 60, screenHeight/2 - texture.height/2, WHITE);
|
||||
DrawRectangleLines(screenWidth - texture.width - 60, screenHeight/2 - texture.height/2, texture.width, texture.height, BLACK);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/textures/textures_image_processing.data
Normal file
BIN
docs/examples/web/textures/textures_image_processing.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
239
docs/examples/web/textures/textures_image_processing.html
Normal file
239
docs/examples/web/textures/textures_image_processing.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="textures_image_processing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
39670
docs/examples/web/textures/textures_image_processing.js
Normal file
39670
docs/examples/web/textures/textures_image_processing.js
Normal file
File diff suppressed because one or more lines are too long
88
docs/examples/web/textures/textures_logo_raylib.c
Normal file
88
docs/examples/web/textures/textures_logo_raylib.c
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - Texture loading and drawing (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)
|
||||
Texture2D texture;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [textures] example - texture loading and drawing");
|
||||
|
||||
texture = LoadTexture("resources/raylib_logo.png"); // Texture loading
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(texture); // Texture unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTexture(texture, screenWidth/2 - texture.width/2,screenHeight/2 - texture.height/2, WHITE);
|
||||
|
||||
DrawText("this IS a texture!", 360, 370, 10, GRAY);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
239
docs/examples/web/textures/textures_logo_raylib.html
Normal file
239
docs/examples/web/textures/textures_logo_raylib.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="textures_logo_raylib.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
38249
docs/examples/web/textures/textures_logo_raylib.js
Normal file
38249
docs/examples/web/textures/textures_logo_raylib.js
Normal file
File diff suppressed because one or more lines are too long
123
docs/examples/web/textures/textures_raw_data.c
Normal file
123
docs/examples/web/textures/textures_raw_data.c
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - Load textures from raw data (adapted for HTML5 platform)
|
||||
*
|
||||
* NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#include <stdlib.h> // Required for malloc() and free()
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
Texture2D sonic;
|
||||
Texture2D checked;
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [textures] example - texture from raw data");
|
||||
|
||||
// Load RAW image data (512x512, 32bit RGBA, no file header)
|
||||
Image sonicRaw = LoadImageRaw("resources/texture_formats/sonic_R8G8B8A8.raw", 512, 512, UNCOMPRESSED_R8G8B8A8, 0);
|
||||
sonic = LoadTextureFromImage(sonicRaw); // Upload CPU (RAM) image to GPU (VRAM)
|
||||
UnloadImage(sonicRaw); // Unload CPU (RAM) image data
|
||||
|
||||
// Generate a checked texture by code (1024x1024 pixels)
|
||||
int width = 1024;
|
||||
int height = 1024;
|
||||
|
||||
// Dynamic memory allocation to store pixels data (Color type)
|
||||
Color *pixels = (Color *)malloc(width*height*sizeof(Color));
|
||||
|
||||
for (int y = 0; y < height; y++)
|
||||
{
|
||||
for (int x = 0; x < width; x++)
|
||||
{
|
||||
if (((x/32+y/32)/1)%2 == 0) pixels[y*height + x] = DARKBLUE;
|
||||
else pixels[y*height + x] = SKYBLUE;
|
||||
}
|
||||
}
|
||||
|
||||
// Load pixels data into an image structure and create texture
|
||||
Image checkedIm = LoadImageEx(pixels, width, height);
|
||||
checked = LoadTextureFromImage(checkedIm);
|
||||
UnloadImage(checkedIm); // Unload CPU (RAM) image data
|
||||
|
||||
// Dynamic memory must be freed after using it
|
||||
free(pixels); // Unload CPU (RAM) pixels data
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(sonic); // Texture unloading
|
||||
UnloadTexture(checked); // Texture unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTexture(checked, screenWidth/2 - checked.width/2, screenHeight/2 - checked.height/2, Fade(WHITE, 0.3f));
|
||||
DrawTexture(sonic, 330, -20, WHITE);
|
||||
|
||||
DrawText("CHECKED TEXTURE ", 84, 100, 30, DARKBLUE);
|
||||
DrawText("GENERATED by CODE", 72, 164, 30, DARKBLUE);
|
||||
DrawText("and RAW IMAGE LOADING", 46, 226, 30, DARKBLUE);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
1300
docs/examples/web/textures/textures_raw_data.html
Normal file
1300
docs/examples/web/textures/textures_raw_data.html
Normal file
File diff suppressed because one or more lines are too long
28110
docs/examples/web/textures/textures_raw_data.js
Normal file
28110
docs/examples/web/textures/textures_raw_data.js
Normal file
File diff suppressed because one or more lines are too long
133
docs/examples/web/textures/textures_rectangle.c
Normal file
133
docs/examples/web/textures/textures_rectangle.c
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - Texture loading and drawing a part defined by a rectangle (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
#define MAX_FRAME_SPEED 15
|
||||
#define MIN_FRAME_SPEED 1
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)
|
||||
Texture2D scarfy;
|
||||
|
||||
Vector2 position;
|
||||
Rectangle frameRec;
|
||||
|
||||
int currentFrame = 0;
|
||||
|
||||
int framesCounter = 0;
|
||||
int framesSpeed = 8; // Number of spritesheet frames shown by second
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [texture] example - texture rectangle");
|
||||
|
||||
scarfy = LoadTexture("resources/scarfy.png"); // Texture loading
|
||||
position = (Vector2){ 350.0f, 280.0f };
|
||||
|
||||
// NOTE: On PLATFORM_WEB, NPOT textures support is limited
|
||||
frameRec = (Rectangle){ 0, 0, scarfy.width/6, scarfy.height };
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(scarfy); // Texture unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
framesCounter++;
|
||||
|
||||
if (framesCounter >= (60/framesSpeed))
|
||||
{
|
||||
framesCounter = 0;
|
||||
currentFrame++;
|
||||
|
||||
if (currentFrame > 5) currentFrame = 0;
|
||||
|
||||
frameRec.x = currentFrame*scarfy.width/6;
|
||||
}
|
||||
|
||||
if (IsKeyPressed(KEY_RIGHT)) framesSpeed++;
|
||||
else if (IsKeyPressed(KEY_LEFT)) framesSpeed--;
|
||||
|
||||
if (framesSpeed > MAX_FRAME_SPEED) framesSpeed = MAX_FRAME_SPEED;
|
||||
else if (framesSpeed < MIN_FRAME_SPEED) framesSpeed = MIN_FRAME_SPEED;
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTexture(scarfy, 15, 40, WHITE);
|
||||
DrawRectangleLines(15, 40, scarfy.width, scarfy.height, LIME);
|
||||
DrawRectangleLines(15 + frameRec.x, 40 + frameRec.y, frameRec.width, frameRec.height, RED);
|
||||
|
||||
DrawText("FRAME SPEED: ", 165, 210, 10, DARKGRAY);
|
||||
DrawText(FormatText("%02i FPS", framesSpeed), 575, 210, 10, DARKGRAY);
|
||||
DrawText("PRESS RIGHT/LEFT KEYS to CHANGE SPEED!", 290, 240, 10, DARKGRAY);
|
||||
|
||||
for (int i = 0; i < MAX_FRAME_SPEED; i++)
|
||||
{
|
||||
if (i < framesSpeed) DrawRectangle(250 + 21*i, 205, 20, 20, RED);
|
||||
DrawRectangleLines(250 + 21*i, 205, 20, 20, MAROON);
|
||||
}
|
||||
|
||||
DrawTextureRec(scarfy, frameRec, position, WHITE); // Draw part of the texture
|
||||
|
||||
DrawText("(c) Scarfy sprite by Eiden Marsal", screenWidth - 200, screenHeight - 20, 10, GRAY);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/textures/textures_rectangle.data
Normal file
BIN
docs/examples/web/textures/textures_rectangle.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
239
docs/examples/web/textures/textures_rectangle.html
Normal file
239
docs/examples/web/textures/textures_rectangle.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="textures_rectangle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
39011
docs/examples/web/textures/textures_rectangle.js
Normal file
39011
docs/examples/web/textures/textures_rectangle.js
Normal file
File diff suppressed because one or more lines are too long
118
docs/examples/web/textures/textures_srcrec_dstrec.c
Normal file
118
docs/examples/web/textures/textures_srcrec_dstrec.c
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - Texture source and destination rectangles (adapted for HTML5 platform)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)
|
||||
Texture2D guybrush;
|
||||
|
||||
int frameWidth;
|
||||
int frameHeight;
|
||||
|
||||
Rectangle sourceRec;
|
||||
Rectangle destRec;
|
||||
Vector2 origin;
|
||||
|
||||
int rotation = 0;
|
||||
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [textures] examples - texture source and destination rectangles");
|
||||
|
||||
guybrush = LoadTexture("resources/guybrush.png"); // Texture loading
|
||||
|
||||
frameWidth = guybrush.width/7;
|
||||
frameHeight = guybrush.height;
|
||||
|
||||
// NOTE: On PLATFORM_WEB, NPOT textures support is limited
|
||||
|
||||
// NOTE: Source rectangle (part of the texture to use for drawing)
|
||||
sourceRec = (Rectangle){ 0, 0, frameWidth, frameHeight };
|
||||
|
||||
// NOTE: Destination rectangle (screen rectangle where drawing part of texture)
|
||||
destRec = (Rectangle){ screenWidth/2, screenHeight/2, frameWidth*2, frameHeight*2 };
|
||||
|
||||
// NOTE: Origin of the texture (rotation/scale point), it's relative to destination rectangle size
|
||||
origin = (Vector2){ frameWidth, frameHeight };
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(guybrush); // Texture unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
rotation++;
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
// NOTE: Using DrawTexturePro() we can easily rotate and scale the part of the texture we draw
|
||||
// sourceRec defines the part of the texture we use for drawing
|
||||
// destRec defines the rectangle where our texture part will fit (scaling it to fit)
|
||||
// origin defines the point of the texture used as reference for rotation and scaling
|
||||
// rotation defines the texture rotation (using origin as rotation point)
|
||||
DrawTexturePro(guybrush, sourceRec, destRec, origin, rotation, WHITE);
|
||||
|
||||
DrawLine(destRec.x, 0, destRec.x, screenHeight, GRAY);
|
||||
DrawLine(0, destRec.y, screenWidth, destRec.y, GRAY);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/textures/textures_srcrec_dstrec.data
Normal file
BIN
docs/examples/web/textures/textures_srcrec_dstrec.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
239
docs/examples/web/textures/textures_srcrec_dstrec.html
Normal file
239
docs/examples/web/textures/textures_srcrec_dstrec.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="textures_srcrec_dstrec.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
38183
docs/examples/web/textures/textures_srcrec_dstrec.js
Normal file
38183
docs/examples/web/textures/textures_srcrec_dstrec.js
Normal file
File diff suppressed because one or more lines are too long
101
docs/examples/web/textures/textures_to_image.c
Normal file
101
docs/examples/web/textures/textures_to_image.c
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [core] example - Retrieve image data from texture: GetTextureData() (adapted for HTML5 platform)
|
||||
*
|
||||
* NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
|
||||
*
|
||||
* This example has been created using raylib 1.3 (www.raylib.com)
|
||||
* raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
|
||||
*
|
||||
* Copyright (c) 2015 Ramon Santamaria (@raysan5)
|
||||
*
|
||||
********************************************************************************************/
|
||||
|
||||
#include "raylib.h"
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
#include <emscripten/emscripten.h>
|
||||
#endif
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Global Variables Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
int screenWidth = 800;
|
||||
int screenHeight = 450;
|
||||
|
||||
// NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)
|
||||
|
||||
Image image;
|
||||
Texture2D texture;
|
||||
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Declaration
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void); // Update and Draw one frame
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Main Enry Point
|
||||
//----------------------------------------------------------------------------------
|
||||
int main()
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
InitWindow(screenWidth, screenHeight, "raylib [textures] example - texture to image");
|
||||
|
||||
image = LoadImage("resources/raylib_logo.png"); // Load image data into CPU memory (RAM)
|
||||
texture = LoadTextureFromImage(image); // Image converted to texture, GPU memory (RAM -> VRAM)
|
||||
UnloadImage(image); // Unload image data from CPU memory (RAM)
|
||||
|
||||
image = GetTextureData(texture); // Retrieve image data from GPU memory (VRAM -> RAM)
|
||||
UnloadTexture(texture); // Unload texture from GPU memory (VRAM)
|
||||
|
||||
texture = LoadTextureFromImage(image); // Recreate texture from retrieved image data (RAM -> VRAM)
|
||||
UnloadImage(image); // Unload retrieved image data from CPU memory (RAM)
|
||||
|
||||
#if defined(PLATFORM_WEB)
|
||||
emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
|
||||
#else
|
||||
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
UpdateDrawFrame();
|
||||
}
|
||||
#endif
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
UnloadTexture(texture); // Texture unloading
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------
|
||||
// Module Functions Definition
|
||||
//----------------------------------------------------------------------------------
|
||||
void UpdateDrawFrame(void)
|
||||
{
|
||||
// Update
|
||||
//----------------------------------------------------------------------------------
|
||||
// TODO: Update your variables here
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
DrawTexture(texture, screenWidth/2 - texture.width/2, screenHeight/2 - texture.height/2, WHITE);
|
||||
|
||||
DrawText("this IS a texture loaded from an image!", 300, 370, 10, GRAY);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
BIN
docs/examples/web/textures/textures_to_image.data
Normal file
BIN
docs/examples/web/textures/textures_to_image.data
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
239
docs/examples/web/textures/textures_to_image.html
Normal file
239
docs/examples/web/textures/textures_to_image.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<title>raylib HTML5 GAME</title>
|
||||
|
||||
<meta name="title" content="raylib HTML5 GAME">
|
||||
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Facebook metatags for sharing -->
|
||||
<meta property="og:title" content="raylib HTML5 GAME">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta property="og:url" content="http://www.raylib.com/games">
|
||||
<meta property="og:site_name" content="raylib.com">
|
||||
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@emegemegames">
|
||||
<meta name="twitter:title" content="raylib HTML5 GAME">
|
||||
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
||||
<meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
<meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
|
||||
|
||||
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
||||
<link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
#header_part {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width:64px;
|
||||
height:64px;
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:10px;
|
||||
background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
div.emscripten_border { border: 1px solid black; }
|
||||
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
#emscripten_logo {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
border-left: 5px solid black;
|
||||
border-right: 5px solid black;
|
||||
border-bottom: 5px solid black;
|
||||
border-top: 5px solid red;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(40, 40, 40);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: rgb(37, 174, 38);
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_part">
|
||||
<a id="logo" href="http://www.raylib.com"></a>
|
||||
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<span id='controls'>
|
||||
<span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
|
||||
</span>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emscripten_border">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
||||
return canvas;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<script async type="text/javascript" src="textures_to_image.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
38712
docs/examples/web/textures/textures_to_image.js
Normal file
38712
docs/examples/web/textures/textures_to_image.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue