Code Monkey home page Code Monkey logo

godot-engine-francophone.github.io's Introduction

Godot-Engine-Francophone

Site statique utilisant Jekyll.

Branche principale

La branche principale est la branche gh-pages. Elle est nommée ainsi pour signaler que c'est la branche de rendu github pages.

Pourquoi ne pas avoir utilisé la branche master?

La branche master est utilisée automatiquement par github pour afficher le site web. Il n'est pas possible de changer de branche, c'est imposé par github. Normalement github pages prend en charge jekyll. Cependant comme nous utilisons le plugin jekyll-pagination-v2 qui n'est pas supporté par github pages, nous ne pouvons pas utiliser le jekyll offert par github pages. Pour palier à ce problème, nous avons mis en place un système d'intégration continue.

L'intégration continue

Le fichier .travis.yml permet de définir l'intégration continue du projet. L'utilisation de travis pro est gratuite car il s'agit d'un projet libre de droit. L'intégration continue de Travis permet de générer, en utilisant jekyll et tout ses plugins, le réperoitre _site qui est ensuite publié automatiquement sur la branche master de ce repository git. En faisant ainsi, la branche master ne contient que des fichiers générés et donc, pousser manuellement sur la branche master reviendrait a casser le site web.

Voici l'url de travis pour le suivi de l'intégration continue: https://app.travis-ci.com/github/Godot-Engine-Francophone/godot-engine-francophone.github.io

Comment publier un article?

Trouver le bon template

Le répertoire _templates contient un fichier pour chaque genre d'article que vous pouvez publier. Ainsi, pour publier un article d'actualité, vous prendrez une copie du fichier 0000-00-00-actualite-example.md que vous positionnerez dans le répertoire _posts

Bien nommer son article

Avec jekyll, il est nécessaire de nommer ses articles comme suit AAAA-MM-JJ-categorie-titre.md.

  • AAAA - L'année en chiffres, par exemple 2020
  • MM - Le mois en chiffres, par exemple 11
  • JJ - Le jour en chiffre, par exemple 26
  • categorie - Le type d'article que vous allez écrire. Cela doit être un de ceux là: actualite, resource, tutoriel, showcase.
  • titre - Le titre de l'article sans espace, ni accent. Que des caracteres alphanumerique

Bien placer son article

Une fois que vous avez choisi le modèle d'article et que vous l'avez copié en le renommant au bon format, il vous faut le placer dans un sous répertoire du répertoire _posts. Le premier sous-répertoire concerne les années (2019, 2020...). Le sous répertoire de second niveau concerne les mois (01, 02, ..., 10, 11).

La rédaction

A cette étape vous êtes libre de commencer a écrire votre article. Ne pas oublier que seuls les catégories actualite et tutoriel possèdent un corps. C'est à dire que la catégorie resource n'affichera pas le contenu markdown.

Les en-têtes

Jekyll permet de définir des en-têtes. Ce sont des méta données qui sont utilisées par Jekyll pour générer l'affichage de l'article

Voici un exemple d'en-tête

---
layout: ressource
title: "Nom de la ressource"
description: >-
  On peut écrire notre description a cet endroit.
  Sur plusieurs lignes. Il faut bien respecter l'indentation.
  Il est préférable de garder la description relativement courte.
type: Sous titre de la ressource
tag:
- Les tags sont affichés
- Dans les bulles bleues
categories: extensions
lien: https://www.exemple.com/lien-vers-la-ressource
---

Sur tous les en-tête, il n'y a que deux champs qu'il ne faut pas modifier: layout et categories. Tout le reste peut être modifié. Ces deux champs permettent de définir comment afficher l'article puis de les trier pour la pagination.

Ajouter des images?

Si vous êtes amenés a ajouter des images, ces dernières doivent être placées dans le rérptoire assets/img. Puis pour les intégrer a votre article procéder comme suit:

![Infobulle de l'image](/assets/img/2019-11-21-actualite-bigorno-titredelimage.jpg){: .center-image }

Le top ce serait que les images portent le même nom que l'article. Par exemple si un article se nomme 2019-11-21-actualite-bigorno.md, l'image devra se nommer /assets/img/2019-11-21-actualite-bigorno-titredelimage.jpg par exemple.

Ajouter une vidéo Youtube?

Ajouter des vidéos Youtube est assez facile à faire. Mettons que vous souhaitiez intégrer cette video https://www.youtube.com/watch?v=4Wz-uCZd6EE a votre article ou tutoriel, alors procédez comme suit:

{% youtube "https://www.youtube.com/watch?v=4Wz-uCZd6EE" %}

Tester le tout en local

Prérequis

Premièrement il vous faut cloner le repository github. Je vous invite a lire cette documentation complète qui va vous permettre d'avoir un environnement de développement stable pour Jekyll.

Comment tester localement

Une fois l'installation de jekyll complété, rendez-vous dans le repository github du site et tapez la commande suivante (si vous êtes sur Linux):

bundle exec jekyll serve --livereload --watch

Une fois que c'est fait, vous pouvez ouvrir cette page http://127.0.0.1:4000/ via votre navigateur. De là vous pourrez visualiser le site localement.

Vous rencontrez un problème?

Vérifiez la date de l'article

Si la date de l'article est dans le futur, alors Jekyll ne l'affichera pas. L'article/tutoriel ne sera disponible que lorsque la date de l'article sera valide qui est déjà passée.

godot-engine-francophone.github.io's People

Contributors

clement-or avatar dependabot[bot] avatar solocodenet avatar sufranjnaweed avatar xsellier avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

disdoh boyquotes

godot-engine-francophone.github.io's Issues

Filtres pour les jeux non-francophones

Afin de pouvoir lister le plus de jeux possible, nous souhaitons ajouter un système de filtre avec un bandeau pour différencier les jeux francophones des non-francophones.

Par défaut, tous les jeux seront montrés et les jeux francophones auront un bandeau "Disponible en Français" visible sur leur miniature.

Exemple:
image

[Showcase] Fiscal Kombat European Edition

Jeu: Fiscal Kombat European Edition

Description:

« Rendez l'argent ! »
Incarnez Manon Aubry en mission contre la fraude fiscale en Europe.
Secouez-les tous pour récolter l'argent et participer à la cagnotte commune contre l'évasion fiscale et pour la planification écologique.

Studio: Discord Insoumis

Site web: Application android disponible sur le PlayStore
https://play.google.com/store/apps/details?id=com.discord.insoumis

Asset: fk

Contenu pour adultes: Non

[Showcase] En attendant 9h15

Jeu: En attendant 9h15
Description: Il est bientôt 9h15, mais pas tout à fait. Enfin, il serait bientôt 9h15 si le temps ne passait pas si lentement et, surtout, si cette horloge n'était pas cassée.

Un point-and-click à jouer avant d'aller dormir.
Studio: Obeqaen
Site web: https://obeqaen.itch.io/en-attendant-9h15
Asset:
Contenu pour adultes: Non

2D wind shader

Nom: 2D wind shader
Description: Shader qui déplace les assets au gré du vent
Type: shaders
Version de godot: 2.1, 3.0, 3.1, 3.2, 4.0, master

// original wind shader from https://github.com/Maujoe/godot-simple-wind-shader-2d/tree/master/assets/maujoe.simple_wind_shader_2d
// original script modified by HungryProton so that the assets are moving differently
//
// speed - The speed of the wind movement.
// minStrength - The minimal strength of the wind movement.
// maxStrength - The maximal strength of the wind movement.
// strengthScale - Scalefactor for the wind strength.
// interval - The time between minimal and maximal strength changes.
// detail - The detail (number of waves) of the wind movement.
// distortion - The strength of geometry distortion.
// heightOffset - The height where the wind begins to move. By default 0.0.

shader_type canvas_item;
render_mode blend_mix;

// Wind settings.
uniform float speed = 1.0;
uniform float minStrength : hint_range(0.0, 1.0);
uniform float maxStrength : hint_range(0.0, 1.0);
uniform float strengthScale = 100.0;
uniform float interval = 3.5;
uniform float detail = 1.0;
uniform float distortion : hint_range(0.0, 1.0);
uniform float heightOffset = 0.0;

float getWind(vec2 vertex, vec2 uv, float time){
float diff = pow(maxStrength - minStrength, 2.0);
float strength = clamp(minStrength + diff + sin(time / interval) * diff, minStrength, maxStrength) * strengthScale;
float wind = (sin(time) + cos(time * detail)) * strength * max(0.0, (1.0-uv.y) - heightOffset);

return wind;
}

void vertex() {
vec4 pos = WORLD_MATRIX * vec4(0.0, 0.0, 0.0, 1.0);
float time = TIME * speed + pos.x * pos.y;
VERTEX.x += getWind(VERTEX.xy, UV, time);
}

tree_wind

[Ressource] Color replacement shader

Nom: Color replacement shader
Description: Un shader permettant de remplacer une couleur par une autre.
Type: Shaders
Version de godot: 3.x (fonctionne surement pour 2.x et 4.x)
OpenGL : GLES2, GLES3

Sans
img1

Avec
img2

shader_type canvas_item;

uniform vec4 remove_color: hint_color;

uniform vec4 replace_color: hint_color;



void fragment(){
	vec4 col = texture(TEXTURE, UV);
	if (col.rgb == remove_color.rgb){
		col = replace_color;
	}
	COLOR = col;
}

(Utilisez le dans un viewport container pour l'appliquer sur plusieurs objets d'un même viewport)

https://gist.github.com/deakcor/e2c96a404550b7f022281780dd6342ce

[Ressource] Cropping shader

Nom: Cropping shader
Description: Permet de rogner une image. Il faut mettre les valeurs de 0 à 1 mais il peut être facilement adapté pour rentrer la valeur en pixel en multipliant par le pixel size (gles3 uniquement, sinon il faut faire un paramètre en plus pour indiquer la taille de l'image).
Type: Shaders
Version de godot: 3.x
OpenGL: 2, 3

Image1

shader_type canvas_item;

uniform float crop_left:hint_range(0.0,1.0,0.01) = 0.0;
uniform float crop_right:hint_range(0.0,1.0,0.01) = 0.5;
uniform float crop_top:hint_range(0.0,1.0,0.01) = 0.0;
uniform float crop_bottom:hint_range(0.0,1.0,0.01) = 0.0;

void fragment(){
	vec4 color = texture(TEXTURE,UV);
	if (UV.x<=crop_left || UV.x>=1.0-crop_right || UV.y>=1.0-crop_bottom || UV.y<=crop_top){
		color.a = 0.0;
	}
	COLOR = color;
}

https://gist.github.com/deakcor/394db005c6bd1ef3153cf6b709ebd252

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.